Search the Community
Showing results for tags 'scrol trigger'.
Found 1 result
-
Fire complete animation at once within ScrollTrigger with scrub
nevanthegreat posted a topic in GSAP
Hello Club Green Sock! I was reading about the common Scroll Trigger mistakes looking for a solution to this question. I think may be going about this the wrong way, but... I have a timeline let hardwareTimeLine = gsap.timeline({ scrollTrigger: { trigger: ".centering-container", scrub: true, pin: true, pinSpacing: true, start: "top", end: "150%" } }); hardwareTimeLine .from(".hero-header", {}) .fromTo(".animated-header", {autoAlpha: 1, top: "29%"}, {autoAlpha: 0, top: "27%"}) .fromTo(".scaling-container", {duration: 1, scaleX: 1.6, scaleY: 1.6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, {duration: 1, scaleX: .6, scaleY: .6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, "<") .fromTo(".screen-inner-1", {duration: .5, transform: "translateX(0)"}, {duration: .5, transform: "translateX(-103%)"}) .fromTo(".screen-inner-2", {duration: .5, transform: "translateX(103%)"}, {duration: .5, transform: "translateX(0)"}, "<") .from(".icons-tray", {y: 150, autoAlpha: 0}); and I was wondering if there was a way to put a tween inside the timeline that is attached to the Scroll Trigger at the very end of my last ".from", if that makes sense? I tried .tweenTo() but that didn't seem to give the effect I am searching for. For example (see my codepen, you may need to look it at on full screen) I would like the grey box (".icons-tray") to tween up on it's own and only be started by the scroll trigger. Can anyone point me in the right direction of the way to approach this effect or have a working demo that shows this? Thank you so much!!!