Timeline/ScrollMagic - How to fade in and out three divs (text and background) back to back in order

[hurricanenara]

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.

See the Pen JjKborV by naracodes (@naracodes) on CodePen

[ZachSaucier]

Hey hurricanenara and welcome to the GreenSock forums.

 

ScrollMagic is not a GreenSock product and we don't really support it here. We highly recommend the official GSAP scroll plugin: ScrollTrigger! It's better in every way. That means you should also upgrade to GSAP 3 which is similarly better than the old version  There's also a listing of ScrollTrigger demos which might get you off to a good start.

[hurricanenara]

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.

[ZachSaucier]

Sorry, I don't really understand what you're asking related to the timelines. Perhaps it's the ScrollMagic code that's getting in the way of my understanding. Can you be more clear? Perhaps make a demo of the issue without using any scrolling?

[akapowl]

 

Hey @hurricanenara

 

Besides the recommendation of migrating to a more recent version of GSAP and switching to ScrollTrigger because you will get way better support for it on here, there is a couple of things, you should consider.

 

In your example, you load TweenMax, TimelineMax, TweenLite and TimelineLite in your HTML.

Additionaly in the js-section you load all recent GSAP files via that codepen option.

 

Then in your code, you switch betwenn TweenMax and TimelineLite and Tweenlite and TimelineMax.

 

You should only load the very neccessary files for what you try to do and also try and stay consistent in use of those files in your custom code, to avoid any problems that could occur between different versions of scripts you load.

 

 

 

In regard to your ScrollMagic question, here is a working exmaple:

 

See the Pen 347daeaeeed03b32e7b946cb0dae6ff1 by akapowl (@akapowl) on CodePen

 

 

 

 

To delay the animation of a scene that shares the trigger with your initial pin, you could use ScrollMagic's .offset() like so

 

let target2 = $('.section2').find('.box');
let tl2 = new TimelineMax();

tl2
.fromTo(target2, 1, { opacity: 0 }, { opacity: 1 })
.to(target2, 1, {opacity: 0 }, "+=0.5")
;

let experience = new ScrollMagic.Scene({
  triggerElement: intro,
  triggerHook: 0,
  duration: 1000
})
  .setTween(tl2)
  .addIndicators()
  .offset(1000)
  .reverse(true)
  .addTo(controller);

 

Your initial pin with that paper-plane animation has a duration of 3000 here with each extra scene having a duration of 1000.

The first extra-scene gets no offset, so it starts right away, the second one gets an offset of 1000 and the third gets an offset of 2000.

 

Also, note, that I changed up your initial tweens in each timeline from .from() to fromTo() tweens, so they revert back as they should when scrolling back up.

 

 

Hope this makes sense to you and helps better understand what's going on.

 

Cheers,

Paul

 

 

[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.