Shanda

Hello, Yes I want the animation to loop. I do not want it tied to scrolling because that is a little annoying on mobile.

Hello, I made this scrolling animation https://codepen.io/okcwebdev/pen/NWvmyXq but would like to recreate the animation on a continuous loop when the image enters the view port. Is there documentation or an example that will help me understand how to do this?

Hi Jack, I recreated the issue in this codepen. Your help would be much appreciated! https://codepen.io/okcwebdev/pen/vYJzzLo

I found the issue is in my ccs. Is there a trick to make my animations work without removing the overflow styles. overflow-y: scroll; overflow-x: hidden;

I am having an issue with elements not animating unless they are in the viewport or unless I resize the browser. https://cantoncc.wpengine.com/amenities/ I had this same issue when I tried to use animate on scroll AOS

My animation appears to work on mobile when I test it with dev tools but does not work on my cellphone. Any ideas or fixes? https://codepen.io/okcwebdev/pen/OJNqrqG

@akapowl Thank you for your help and the bonus tip!

I made the mistake of sharing this animation with my team before I figured out how it works without ExpoScaleEase. My changes are in the codepen under the JS and commented out. Any help is very much appreciated. TweenMax.set(".play-circle-01", { rotation: 90, transformOrigin: "center" }) TweenMax.set(".play-circle-02", { rotation: -90, transformOrigin: "center" }) TweenMax.set(".play-perspective", { xPercent: 6.5, scale: .175, transformOrigin: "center", perspective: 1 }) TweenMax.set(".play-video", { visibility: "hidden", opacity: 0, }) TweenMax.set(".play-triangle", { transformOrigin: "left center", transformStyle: "preserve-3d", rotationY: 10, scaleX: 2 }) const rotateTL = new TimelineMax({ paused: true }) .to(".play-circle-01", .7, { opacity: .1, rotation: '+=360', strokeDasharray: "456 456", ease: Power1.easeInOut }, 0) .to(".play-circle-02", .7, { opacity: .1, rotation: '-=360', strokeDasharray: "411 411", ease: Power1.easeInOut }, 0) const openTL = new TimelineMax({ paused: true }) .to(".play-backdrop", 1, { opacity: .95, visibility: "visible", ease: Power2.easeInOut }, 0) .to(".play-close", 1, { opacity: 1, ease: Power2.easeInOut }, 0) .to(".play-perspective", 1, { xPercent: 0, scale: 1, ease: Power2.easeInOut }, 0) .to(".play-triangle", 1, { scaleX: 1, ease: ExpoScaleEase.config(2, 1, Power2.easeInOut) }, 0) .to(".play-triangle", 1, { rotationY: 0, ease: ExpoScaleEase.config(10, .01, Power2.easeInOut) }, 0) .to(".play-video", 1, { visibility: "visible", opacity: 1 }, .5) const button = document.querySelector(".play-button") const backdrop = document.querySelector(".play-backdrop") const close = document.querySelector(".play-close") button.addEventListener("mouseover", () => rotateTL.play()) button.addEventListener("mouseleave", () => rotateTL.reverse()) button.addEventListener("click", () => openTL.play()) backdrop.addEventListener("click", () => openTL.reverse()) close.addEventListener("click", e => { e.stopPropagation() openTL.reverse() }) /* updating to new v of gsap gsap.set(".play-circle-01", { rotation: 90, transformOrigin: "center" }) gsap.set(".play-circle-02", { rotation: -90, transformOrigin: "center" }) gsap.set(".play-perspective", { xPercent: 6.5, scale: .175, transformOrigin: "center", perspective: 1 }) gsap.set(".play-video", { visibility: "hidden", opacity: 0, }) gsap.set(".play-triangle", { transformOrigin: "left center", transformStyle: "preserve-3d", rotationY: 10, scaleX: 2 }) const rotateTL = new gsap({ paused: true }) .to(".play-circle-01", .7, { opacity: .1, rotation: '+=360', strokeDasharray: "456 456", ease: Power1.easeInOut }, 0) .to(".play-circle-02", .7, { opacity: .1, rotation: '-=360', strokeDasharray: "411 411", ease: Power1.easeInOut }, 0) const openTL = new gsap({ paused: true }) .to(".play-backdrop", 1, { opacity: .95, visibility: "visible", ease: Power2.easeInOut }, 0) .to(".play-close", 1, { opacity: 1, ease: Power2.easeInOut }, 0) .to(".play-perspective", 1, { xPercent: 0, scale: 1, ease: Power2.easeInOut }, 0) .to(".play-triangle", 1, { scaleX: 1, ease: Power4(2, 1, Power2.easeInOut) }, 0) .to(".play-triangle", 1, { rotationY: 0, ease: Power4(10, .01, Power2.easeInOut) }, 0) .to(".play-video", 1, { visibility: "visible", opacity: 1 }, .5) const button = document.querySelector(".play-button") const backdrop = document.querySelector(".play-backdrop") const close = document.querySelector(".play-close") button.addEventListener("mouseover", () => rotateTL.play()) button.addEventListener("mouseleave", () => rotateTL.reverse()) button.addEventListener("click", () => openTL.play()) backdrop.addEventListener("click", () => openTL.reverse()) close.addEventListener("click", e => { e.stopPropagation() openTL.reverse() }) */