Alonso Antunez

Nevermind @Rodrigo! That did the trick! Thanks a lot for the help and Quick response!

Thanks Rodrigo for the quick reply! Unfortunately, i'm using version 3.11.1 (for both gsap and scrolltrigger) in my project and i'm unable to find the 3.8 version of Gsap. By any chance, is there a cdn available where i can get them?

Hi everyone!. Im a relative ScrollTrigger and Gsap new user, also I'm not a deep knowledge javascript developer. So here goes my main issue. I'm creating a project with bootstrap, jquery, ScrollTrigger and Gsap. I have two columns. The left one contains a sticky element where there's multiple elements that are gouing to be animated, the right one has multiple rows with many text descriptions (texts are nost important for the purpose). What im triying to accomplish is, when scrolling along the document height, multiple animations are being fired and the triggers are the multiple sections on the right column, for example: - on the first (with id first) container on the right (the one that shows when the document loads), the video scale is 1, the image and the shadow start with opacity 1 - on the second container (with id second) container on the right, on the left the video scale doubles, the image and the shadow turns their opacity to 0 - on the third (with id third) container on the right, the video turns its opacity to 0 and the image and shadow opacity turns to 1. This is a small excerpt of the original project, in total are 13 containers on the right that fires multiple animations along the height of the scroll (multiple videos, multiple images, opacitys, filters, etc) on the left column. I'm using timelines to fire the multiple animations. My main problem is, when the document loads, all the contents on the sitcky column show up, and then hide as the timeline of the first right container hides them. I had to create a timeline where all the other elements are hidden and only the elements that must be shown are visible. Also, the timeline that hides all the elements had to be put at the very end of the js document, since it seems like the timelines are taking the last status/settings that are being declared. I'm not really sure why is this happening, but this is the main (major) issue, Also, if i scroll very fast (up or down) all the elements that are being animated show up and they have not enough time to show/hide and dont "obey" the propper animations. Also, when resizing, animations seem to be triggering and the result is the same, all elements end up beeing shown/hidden and not "obeying" their timeline. Also, as a minor issue, duration time declared on the timeline seems to be taking places, like first fires one animation and then, when the first animation fires, the second starts and I want the elements to be animated at the same time when the right element (the trigger that fires the animations) shows up. I'm not really sure if timelines are the correct approach to this, but this is pretty much the result that came up to my mind since (as i was saying) im not a deep javascript knowledge developer. Also, i can provide a link to my test project (i understand you guys check only codepen urls, i was just mentioning this detail in case its better for the viewing purposes). What am i Doing wrong?