Want to get this as ready made template with just 1 CLICK INSTALL?
Code Snippet for Rotating Image Effect:
<style>
[class^='mdw-rotating-image-effect'] .elementor-widget-image,
[class*='mdw-rotating-image-effect'] .elementor-widget-image{
transition: none !important;
}
[class^='mdw-rotating-image-effect'] .mdw-rotating-images,
[class*='mdw-rotating-image-effect'] .mdw-rotating-images{
perspective: 1000px;
transition: none !important;
}
[class^='mdw-rotating-image-effect'] .elementor-widget-image img,
[class*='mdw-rotating-image-effect'] .elementor-widget-image img,
[class^='mdw-rotating-image-effect'] .elementor-widget-image a,
[class*='mdw-rotating-image-effect'] .elementor-widget-image a{
max-width: unset;
}
[class^='mdw-rotating-image-effect'] .mdw-rotating-image-content,
[class*='mdw-rotating-image-effect'] .mdw-rotating-image-content,
[class^='mdw-rotating-image-effect'] .mdw-rotating-images,
[class*='mdw-rotating-image-effect'] .mdw-rotating-images{
opacity: 0;
}
[class^='mdw-rotating-image-effect'].init .mdw-rotating-image-content,
[class*='mdw-rotating-image-effect'].init .mdw-rotating-image-content,
[class^='mdw-rotating-image-effect'].init .mdw-rotating-images,
[class*='mdw-rotating-image-effect'].init .mdw-rotating-images,
html.elementor-html .mdw-rotating-image-content,
html.elementor-html .mdw-rotating-images{
opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
if(!MDWNonce112){
var MDWNonce112 = true;
(function($){
let selector = '[class^="mdw-rotating-image-effect"], [class*="mdw-rotating-image-effect"]',
options = [],
isImageLoad = [],
isWindowLoaded = false,
isAnimated = [],
windowHeight,
bottomView,
topView
function imageStackEntrance($this, i){
var breakPoint = '768px',
media = gsap.matchMedia()
media.add({
isDesktop: `(min-width: ${breakPoint})`,
isMobile: `(max-width: ${breakPoint})`,
},
(context) => {
var { isDesktop } = context.conditions,
imageContainer = $this.find('.mdw-rotating-images'),
content = $this.find('.mdw-rotating-image-content'),
images = $this.find('.elementor-widget-image'),
imageHeight = images.eq(0).height(),
count = images.length,
sliceAngle = (2*Math.PI)/count,
radius1 = options[i].initRadius + imageHeight/2,
radius2 = isDesktop ? options[i].radiusDesktop : options[i].radiusMobile,
cardFlip = options[i].flipCard
radius2 -= options[i].initRadius
$this.addClass('init')
gsap
.timeline()
.from(images, {
y: $this.find('.mdw-rotating-images').height()/2 + imageHeight * 1.5,
rotateX: -180,
stagger: 0.1,
duration: 0.5,
opacity: 0.8,
scale: 3,
})
.set(images, {
transformOrigin: `center ${radius1 + imageHeight/2}px`,
})
.set(imageContainer,{
transformStyle: 'preserve-3d',
})
.to(images,{
y: -radius1,
duration: 0.5,
ease: 'power1.out',
})
.to(images,{
rotation: (index) => index*360/count,
rotateY: 15,
duration: 1,
ease: 'power1.out',
}, '<')
.to(images,{
rotation: (index) => (index+1) * (360 / count),
x: (index) => radius2*Math.sin((180-(index+1)*360/count)*Math.PI/180),
y: (index) => radius2*Math.cos((180-(index+1)*360/count)*Math.PI/180) - radius1
})
.to(images, {
rotateY: 180,
duration: 1,
}, '<')
.from(content, {
opacity: 0,
filter: 'blur(60px)',
duration: 1,
}, '<')
.to(images, {
repeat: -1,
duration: 2,
onRepeat: () => {
if(cardFlip){
gsap.to(images[Math.floor(Math.random() * count)], {
rotateY: '+=180',
});
}},
})
.to(imageContainer, {
rotation: 360,
duration: 20,
repeat: -1,
ease: 'none',
}, '<-=2')
})
}
function triggerAnimation(e){
if(e && e.type=='load') isWindowLoaded = true
if(!isWindowLoaded) return
$(selector).each(function(i){
var $this = $(this),
offset = $this[0].getBoundingClientRect(),
offsetTop = offset.top,
offsetBottom = offset.bottom
if(offsetTop < bottomView && offsetBottom > topView && !isAnimated[i] && isImageLoad[i] && isWindowLoaded){
isAnimated[i] = true
imageStackEntrance($this, i)
}
})
}
function getValues(){
$(selector).each(function(i){
let $this = $(this)
className = $this.attr('class'),
classNameIndex = className.indexOf('mdw-rotating-image-effect'),
shortClass = className.substring(classNameIndex, className.indexOf(' ',classNameIndex)),
values = shortClass.split('-')
options[i] = {
initRadius: 50,
radiusDesktop : 170,
radiusMobile: 90,
flipCard: true
}
values.forEach(function(value, index){
if(value =='initradius' && values[index+1] && !isNaN(values[index+1])){ options[i].initRadius = parseFloat(values[index+1])
}
if(value =='radius' && values[index+1] && !isNaN(values[index+1])){ options[i].radiusDesktop = parseFloat(values[index+1])
}
if(value =='mobileradius' && values[index+1] && !isNaN(values[index+1])){ options[i].radiusMobile = parseFloat(values[index+1])
}
if(value =='noflip'){ options[i].flipCard = false }
})
})
}
function init(){
$(selector).each(function(i){
isAnimated[i] = false
isImageLoad[i] = false
var imageCount = 0,
img = $(this).find('.mdw-rotating-images img')
img.each(function(){
$(this).on('load', function() {
imageCount++
if(imageCount == img.length){
isImageLoad[i] = true
triggerAnimation()
}
})
if(this.complete){
$(this).trigger('load')
}
})
getValues()
})
}
function setValues(){
windowHeight = $(window).height()
bottomView = (windowHeight / 100) * 50
topView = (windowHeight / 100) * 50
}
$(document).ready(init)
$(window).on('load resize', setValues)
$(window).on('load scroll', triggerAnimation)
})(jQuery)
}
</script>
