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!!!