[Second scrollTrigger unsmooth transition]

Thanks for the Solution.

 

This is indeed a much smoother solution and the way you did this with the timline is a way smarter approach. Will go for this now more often!

[Second scrollTrigger unsmooth transition]

Thanks for your answers!

 

Here I created a little Demo. Also when scrolling back up it´s not working the way it´s working by scrolling down (different timing)

 

See the Pen rNJgKeK by webkonditorei (@webkonditorei) on CodePen

 

 

[Second scrollTrigger unsmooth transition]

Hey!

I got a Section on a homepage where background colours are changing by scrolling.

 

The first transition is working fine, but with the second scrollTrigger it´s just changing without any transition.

 

Why does this happen?

 

Here´s the live site link: https://fairnergy.webkonditorei.de/     --> It´s about the 4th section where the text is sticky on the left and cards are moving up on the right.

 

Here´s the GSAP i wrote for animating the elements:

   

 /* First Trigger */
    
    gsap.to('#partners', {
        scrollTrigger: {
     trigger: '#trigger-color',
     toggleActions: 'play none none reverse',
   },
        background: "#6B6B6B",
        ease: "power4.inOut",

    });
    
    
    
      gsap.to('.toggle-text', {
        scrollTrigger: {
     trigger: '#trigger-color',
     toggleActions: 'play none none reverse',
   },
        color: "#F6F6F6",
        ease: "power4.inOut",

    });
    
    
      gsap.to('.partner-box', {
        scrollTrigger: {
     trigger: '#trigger-color',
     toggleActions: 'play none none reverse',
   },
        background: "#505050",
        duration: 1,
        

    });
    
    
    
    /* Second Trigger */
    
    
     gsap.to('#partners', {
        scrollTrigger: {
     trigger: '#trigger-color1',
     toggleActions: 'play none none reverse',
   },
        background: "white",
        ease: "power4.inOut",

    });
    
    
    
    
    
          gsap.to('.toggle-text', {
        scrollTrigger: {
     trigger: '#trigger-color1',
     toggleActions: 'play none none reverse',
   },
        color: "#E29863",
        

    });
    
    
     
    
         gsap.to('.partner-box', {
        scrollTrigger: {
     trigger: '#trigger-color1',
     toggleActions: 'play none none reverse',
   },
        background: "#F9E8DC",
        duration: 1,
        

    });

    

 

[Sticky Div on left column - Images changing on scroll in right Column]

17 hours ago, PointC said:

If I understand the question correctly, I think you'd want to loop though your targets and add each to the timeline. This avoids manually adding a bunch of tweens like you have now. That way you can add as many divs as you like and it'll all still work perfectly. 

 

 

 

 

Hopefully that helps. Happy tweening.

 

Thanks, that´s it!!!

[Sticky Div on left column - Images changing on scroll in right Column]

@SteveS That’s what I did.

 

i added a third div within the „Laptop“ Div, but the one I’ve added just gets faded in, but the second doesn’t get faded out.

 

So the pen I’ve got now is more or less what I need, but I need to be able to add as many divs in the „Laptop“ div as I need and all elements in there are getting faded in / out by scrolling while the left div („text“) is pinned.

 

 

[Sticky Div on left column - Images changing on scroll in right Column]

Hey!

 

I want to create a section which has two Div's. 

In the left Div I got a Heading and a Paragraph, in the right Div I got a few Images and Text.

 

I want to have the left Div sticky and change the right Div a few times on Scroll (just a Fade or sth.). When all the right Div's were schown I want the user go ahead further down the page (normal scrolling).

 

So Text on the left gets sticky, div on the right fades in and out on scroll.

 

How can I achieve this?

 

*** Sorry i´m pretty new to GSAP***

 

 

***Edit***

 

I got this now, but by adding a third div on the right side this technique is not working anymore... How can I solve this?

 

See the Pen LYQMBxJ by webkonditorei (@webkonditorei) on CodePen

[Reverse animation with hitting scrolltrigger]

I want to animate my nav container (change background) when hitting a scrollTrigger. Working fine as it should, but I want to reverse the animation when I scroll back to the scrollTrigger again.

 

How di I get this done?

 

This is what I got so far:

 

gsap.to('#navContainer', {
        scrollTrigger: '#backgroundTrigger',
     background: "red",
        duration: 1.2,
        ease: "power4.inOut"
    });