Opacity animation on scrolltrigger like iphone12pro landing page

[szyablo]

Hello i'm trying to do something similar to iphone12 pro landing page can be seen here(https://www.apple.com/iphone-12-pro/).

But i don't know where to start.

So far i've done this : 

useEffect(() => {

    gsap.to(".about_section", {

      scrollTrigger: {

        trigger: ".about_section",

        markers: true,

        start: "top top",

        end: "bottom center",

        scrub: true,

      },

      yoyo: true,

      repeat: 1,

      opacity: 1,

      y: 0,

    });

  }, []);

 

 

as you can in the gif at the center the opacity is 0 and at top and bottom is becames 0 , it should be opposite 

 

demo : 

See the Pen LYxzyWB by siinghd (@siinghd) on CodePen

[akapowl]

 

Hey @szyablo

 

There's actually quite a few different ways to do this (some contained in the example pen below) - but your code snippet seems to be working quite right for me (I only adjusted the start a bit).

 

See the Pen b52abd6dc94f1bce7f0785b56c38e595 by akapowl (@akapowl) on CodePen

 

 

Your problems might be related to tweening on the y of the trigger-element itself, which is bound to create issues. But it's impossible to tell from the GIF and your code-snippet only. So if you need furher assistance on this, it would be great if you could create a minimal demo of your issue for us to work with.

 

[szyablo]

2 hours ago, akapowl said:

 

Hey @szyablo

 

There's actually quite a few different ways to do this (some contained in the example pen below) - but your code snippet seems to be working quite right for me (I only adjusted the start a bit).

 

 

 

 

 

Your problems might be related to tweening on the y of the trigger-element itself, which is bound to create issues. But it's impossible to tell from the GIF and your code-snippet only. So if you need furher assistance on this, it would be great if you could create a minimal demo of your issue for us to work with.

 

Hi , thanks for your answer ... i took your code and added my html and it works on codepen but not in localhost... it can be cause i'm using nextjs?

when i set opacity :0

like this : 

 

    gsap.to("div.container", {

      scrollTrigger: {

        trigger: "section.section4",

        markers: true,

        start: "top center",

        end: "bottom center",

        scrub: true,

        markers: true,

      },

      yoyo: true,

      repeat: 1,

      opacity: 0,

      y: 0,

    });

it works but when in center the opacity is zero.

 here you can see opacity doesnt change

 

So this seems to work 50%  the opacity is changed inly when it is at the top: 

//gsap.to('.content', { 
//
//   opacity: 1,
//  
//   scrollTrigger: {
//     trigger: '.content',
//     start: 'center bottom',
//     end: '+=25%',
//     scrub: true,
//     markers: true
//   }
//
//})
//
//gsap.to('.content', { 
//
//  opacity: 0,
//  immediateRender: false,
//  
//   scrollTrigger: {
//     trigger: '.content',
//     start: 'center 25%',
//     end: '+=25%',
//     scrub: true,
//     markers: true
//   }
//
//})

 

 

[akapowl]

28 minutes ago, szyablo said:

it can be cause i'm using nextjs?

 

If it works on codepen but not in your local environment, it could very well be that it has do do with your environment/setup.

 

Sorry, but I am not familiar with nextjs at all, so you will have to wait for someone else to swing by who knows his ways around that.

 

But even for others it will probably be very hard to tell what could be the cause without a demo to work with.

 

[szyablo]

27 minutes ago, akapowl said:

 

If it works on codepen but not in your local environment, it could very well be that it has do do with your environment/setup.

 

Sorry, but I am not familiar with nextjs at all, so you will have to wait for someone else to swing by who knows his ways around that.

 

But even for others it will probably be very hard to tell what could be the cause without a demo to work with.

 

Hi here is the demo : 

[szyablo]

1 hour ago, akapowl said:

 

If it works on codepen but not in your local environment, it could very well be that it has do do with your environment/setup.

 

Sorry, but I am not familiar with nextjs at all, so you will have to wait for someone else to swing by who knows his ways around that.

 

But even for others it will probably be very hard to tell what could be the cause without a demo to work with.

 

@akapowl hi , i figured it out why it wasn't working.

I don't know why but it looks like in react you have to set the style propriety to the element like : 

 <div style={{opacity:0}} className="container">

 

[akapowl]

15 hours ago, szyablo said:

hi , i figured it out why it wasn't working.

 

Just checking in to make sure, you've got things resolved now on your end. Right?

 

I see the problem now. You were tweening .to() an opacity of 1 but you never set the element you're tweening on to have an opacity of 0 in the first place. Could have also done that via CSS.

 

See the Pen 9af61748f2c4bac558ca4c067f5d5ede by akapowl (@akapowl) on CodePen