Adithya

I've been using the scrollmagic syntax without migrating for the scrolltrigger, everything looked good but suddenly i don't see the animation script getting applied whatsoever . Is this because scrollmagic is deprecated. Any light would be of great help.Thanks

hey ! @akapowl and @ZachSaucier Got you ! I've been able to achieve the animation , but even after a forEach loop , why do the text animation all animate at one go , i want the text1 to fade in and out followed by the next and so on , i can target each text individually but that would make my code long , what am i missing exactly ? codepen of the flawed animation https://codepen.io/adithyacodes/pen/NWbXqMz and the codepen here https://codepen.io/akapowl/pen/00806d3c2fe0f4275ec9846196b85919 which was provided from you in the same thread above, I'm bit confused why do we use two scrolltrigger objects ( scrolltrigger and scrolltrigger.create) for the usecase Thanks

Hey ! see if this can help you

This the code snippet which is crashing and the text stack one next to other

Hey ! i was able to fix the scroll issue , the only issue which still persists is , i want the text to appear while it comes in and go off while the next comes ,instead my test gets stacked, is there a better approch here the-idc-google-chrome-2021-02-24-03-14-41_IPNZk7c4.mp4

Hey ! I've been working with animation part , i have implemented the same piece of code same as the boxes codepen , but the animation is not in sync with the scroll , it just happens as a slidehow even without scroll. Just if its possible to tell what is making the animation in sync with scroll here , i have tried refering the docs and playing around the code and implementing it but the animation timeline doesn't sync with scroll. thanks

@akapowl , Hey ! That's some serious breakthrough , this was a simple sample case created to explain my issue , but i was trying to do this in the animation which wasn't happening , Is there an approach where i can hide the other boxes from the dom and make them appear only when they are animating as i scroll ( say : when the red box animates the other boxed stacked without animation shoudn't be visible in the dom ) . I genuinely thank you for the pen , it helped me work on the issue better. Thanks a ton !

Hey ! I've included a codepen here , which is quite similar to my use case , here i want each box ( yellow, red , green ) to fade out one after the other as i scroll . bit confused since they fadein and out at the same view port . glad, if you could help

Hey ! I've tried implemnting the approach but it isn't something that is desired, pain-points : 1. The heading animation should be corresponding to the scroll , as i scroll the first heading comes and vanishes and in the same place the next heading comes ( kind of carousel but it happens as i move the page-scrollbar (nobuttons)

Hey ! i just watched the position video , I've got a bunch of elements like 5 titles to animate , so should i go like ( #title-1, #title-2 ) target and animate them indvidually

Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough

hey ! Do codesandox links work on you forum ?

Hey ! I'm newbie to gsap and the journey here as been great so far ! I've been stuck with this animation for quite few days and thought i could seek help , Pain-point : The heading must animate one after the other while I scroll , but everything comes into the viewport at the same instance. desired-output : https://drive.google.com/file/d/1gFJEtuEkhNUfchI3Pgb14h6EOLXyrcjW/view?usp=drivesdk Hereby I attach a video of how it should look while i scroll. Note: The octopus-image and the paragraph down the heading will be animated the same way , I've just made it with the Heading in codesandbox for testing prupose. Thanks

Hey ! this is the link to sandbox https://codesandbox.io/s/ciyew?file=/src/App.js , but the heading and para aren't showing up in the output screen

I totally understand , but i'm finding few difficulties in migrating my code logic from scrollmagic to scrolltrigger