Shanda
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Shanda
-
-
Hello, I made this scrolling animation 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?
See the Pen NWvmyXq by okcwebdev (@okcwebdev) on CodePen
-
Hi Jack, I recreated the issue in this codepen. Your help would be much appreciated!
-
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
See the Pen vYJzzLo by okcwebdev (@okcwebdev) on CodePen
-
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?
See the Pen OJNqrqG by okcwebdev (@okcwebdev) on CodePen
-
On 9/16/2020 at 6:38 PM, akapowl said:
Not sure if I actually got everything in there to new syntax or if I might have missed something, but here you go
Also there's little things you could want to adjust.
For example, if you tween on opacity and visibility at the same time you could also simply just tween on autoAlpha.
gsap.to(".something", { duration: 1.0, opacity: 1, visibility: "visible" })
could also be
gsap.to(".something", { duration: 1.0, autoAlpha: 1 })
Or if inside a timeline all your tweens have a duration of 1.0, you could set defaults for the timeline, like so
const openTL = gsap.timeline({ paused: true, defaults: { duration: 1.0} })
and wouldn't have to set that duration of 1.0 to every single tween.
(Can also do that with eases etc. )
But those are just suggestions
@akapowl Thank you for your help and the bonus tip!
-
1
-
-
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()
})
*/See the Pen ZEWjYqd by okcwebdev (@okcwebdev) on CodePen
Image sequence loop
in GSAP
Posted
Hello, Yes I want the animation to loop. I do not want it tied to scrolling because that is a little annoying on mobile.