Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
szyablo

Opacity animation on scrolltrigger like iphone12pro landing page

Recommended Posts

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 

ezgif.com-gif-maker.gif

 

demo : 

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

Link to post
Share on other sites

 

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.

 

  • Like 3
Link to post
Share on other sites
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.

AoeYzP0.gif 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
//   }
//
//})

x8ZZV4p.gif

 

 

Link to post
Share on other sites
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.

 

  • Like 1
Link to post
Share on other sites
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 : 

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

Link to post
Share on other sites
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">

 

Link to post
Share on other sites
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

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×