hurricanenara

Hello @akapowl, Thank you so much for you advice on loading only the necessary scripts and how the Tween works in detail. I will take note going forward. Thank you again, the working product is exactly what I was envisioning and your explanation on the essential offsets as well as utilizing the .reverse() method makes very much sense.

Hi Zach! Thank you for your prompt reply and your suggestion for ScrollTrigger. It does seem better and I will definitely give this one a shot. Would anyone be able to help me on the part where I am using declaring and instantiating the TimelineMax timelines? (the tl1, tl2, tl3 variables). The .from and the .to methods to have the boxes go from opacity 0 to 1 then back to 0 ( for all boxes) and to have the second and last/third boxes to animate later during the animation. Thank you again.

Hi everyone. Relatively new to gsap and would really appreciate your help on this (I tried my best and this is where I am now, stuck). Attached is the Codepen link. Correct code but it does not behave the way it is supposed to. Tried to upload a screen recording but too big, but it is accessible via https://hurricanenara.github.io/ (works best on chrome at 100% zoom/default) The desired behavior is for the three divs (Projects, Experience, and Education in order) to fade in and fade out smoothly at three different points the plane passes through (as the plane flies through the purple mountains, the Projects box (to be filled with text) should fade in completely and fade out as the plane leaves the mountains. Secondly, the Experience div box should fade in as the plane is at the beehive and fade out as it leaves the beehive. Lastly, the Education div box should fade in as the plane is at the trees, and finally fade out. Currently the desired behavior works for the Projects div box, but as it is shown in the video, the rest of the two divs are not. I would really like the second div box (Experience) to render at the beehive (currently rendering too early) and the third/last div box to render at the trees both with correct fade in and fade out animation. The delaying was attempted by adding a delay property to the .to() method on the TimelineMax. I am so glad I found this huge forum of support. I really appreciate your help in advance, and I hope you have a great day.