Beaowulf

"Glad to hear it. In your code, that means switching out new TimelineMax for gsap.timeline. " - Noted and fixed! "One other thing: "+0.7" doesn't make much sense. You either want just 0.7 or "+=0.7" as the position parameter. For more info see this post." -Will read! Again thanks

hey @ZachSaucier While creating the sample code in codepen I found a way to fix it according to what you have told me to do! I will also be reading up on migrating to gsap3, thanks alot for your help! I will post the code below (for reference)... var masterTimeline = new TimelineMax({ scrollTrigger:{ trigger:".card", markers: true, start:"50% bottom", end:"bottom bottom", }}); masterTimeline .add(part1()) .add(part2(), "+0.7") .add(part3(), "+1.2") .add(part4(), "+1.5") "

Yeah kinda struggling with how exactly

Thanks for your response, Im still at a noob phase and im trying to learn, I hope the above (Screenshot) makes sense. My main goal that I cant seem to achieve is: "When I scroll at this section of the website" I want my animations to start playing. The screenshot provided above plays as follow. 1st box. 1st box will come from bottom up, 2nd text will start displaying 1 by 1. same for 2nd box, 3rd box and 4thbox. 1st box is its own timeline.. 2nd box its own......4th its own. All these are within a bigger masterTimeline. as shown on the code: " var masterTimeline = new TimelineMax(); masterTimeline .add(part1()) .add(part2(), "-=2.2") .add(part3(), "-=2.2") .add(part4(), "-=2.2"); " So back to my main goal, how and or where should / can I add the trigger. Right now just as I load the website its playing without me even reaching there (i.e I cant seem to get the trigger point right)... Thanks for answering this fast If more info is needed I will try to create my example on codepen...

var masterTimeline = new TimelineMax(); masterTimeline .add(part1()) .add(part2(), "-=2.2") .add(part3(), "-=2.2") .add(part4(), "-=2.2"); part1, part2.... all of these are multiple timelines with animations inside of them. Only "trigger" that the animations have are for example this: All my animations are about the same code as below... " tl.from(".card4 .sect8-greentick-text p", { scrollTrigger:{ trigger: ".card1", //Here }, stagger: 0.1, autoAlpha: 0, duration: 0.5, x: "-50", }, '<.2'); "" Question is how do I add a Parent trigger on masterTimeline? to run all animations?

Thanks so much for the fast reply @akapowl

Example Code below: gsap.from("#sect2-main-videoplayer", { scrollTrigger:{ trigger: "#sect2-bottom", toggleActions: "play none none none", start: "-50% 50%", pin: true, anticipatePin: 1, scrub: 0.5, ease: Power1.inOut, }, autoAlpha: 0, duration: 3, x: 650, }); Please see the screenshot below. Im basically trying to figure out on how to "animate" a div/image coming from the right side to the left (to its original position). Unfortunately it creates "Extra spacing" (lack of a better word). If you see on the bottom of the screenshot I am able to now scroll towards the right side of the screen. Is there anyway I can adjust / fix this? Note: I have added one of your codepen examples I found online. I think it illustrates the same issue im having. It creates spacing that I am able to scroll on the X axis and "breaks" the screen abit.