Background change and div changing on scroll

[Clou]

Hi guys im kind of stuck here.  I want the background of the entire div to change (.animacija and .panel) with ease animation when the the user scroll to the last panel. I also have trouble to get clean animation with .panel changing... Of course the animation must work on back scroll

See the Pen YzJEOxY by matev-pevec (@matev-pevec) on CodePen

[Rodrigo]

Hi,

 

Just change this:

animacija.style.backgroundColor = "#F0F0F0";

To this:

gsap.to(animacija, { backgroundColor: "#F0F0F0", duration: 0.35 });

You can play with the duration and easing function (check the ease visualizer for more information).

 

Also is worth noticing that in your codepen example the leave back callback is never executed. I don't know if in your project it does.

 

Hopefully this helps.

Happy Tweening!

[Clou]

Great, thank you. I cant figure out why the transition of the panels isnt smooth and why  i need  two las words (   <div class="panel zadnji">
            <h2>United</h2>
          </div>
          <div class="panel zadnji">
            <h2>United</h2>
          </div>) for the animation to work..

[Rodrigo]

Hi,

 

I've been looking at your codepen example and I can't figure exactly what is not working and how. I see all the text elements transitioning.

 

Please isolate your example to show just those elements and remove everything else. Same in your javascript code, just keep the code you need for those particular elements to animate.

 

Happy Tweening!

[Clou]

Hi, i updated it, so the last panel is  must be writen 2 times in html.. i wanted to achive that the first panel (Creative) is visible from the start and the animation starts with second panel (Limitless), when the animation comes to the last panel (United), the background of all section includin panel must change to white

 

 

[Rodrigo]

Hi,

 

I'm still not sure if I follow you correctly on this one, but I think you're overcomplicating things quite a bit IMHO.

 

I think this works the way you intend and is far simpler using the position parameter:

See the Pen eYPyMrQ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Clou]

Thank you, that what i was looking for, now  what it just needs to work on scroll?

[Cassie]

Hiya,

 

You can add a ScrollTrigger to any tween or timeline ✨

 

See the Pen eYPyMrQ by GreenSock (@GreenSock) on CodePen

 

... More in the ScrollTrigger docs  👀

[Clou]

Great thank you thats great news! now im having troubles to insert this section my my hero section, i cant figure out the conflict... the goal is of course

to scroll to .animacija after the .container-hero animation is ended..

See the Pen ExdQzzb by matev-pevec (@matev-pevec) on CodePen

[Cassie]

Are you trying to do this?

 

See the Pen poxLvqY by GreenSock (@GreenSock) on CodePen

You have to have all your Content inside the ScrollSmoother wrapper and content div, you'll also need to target the correct trigger element and start position if you've added another panel in. Adding markers is always a good way to check where the triggers are.

 

Hope this helps.

[Clou]

aaa YES! thank you, excactly this

[Cassie]

perfect! ☺️