[How can i move scroller-end position ?]

hi i would like to move scroller-end position but i don't know how to do it.

I have tried doing this way :

 

end : "+30%" but it doesn't work , seems like it is moving the content end position 

i would like to move it to the blue line here : 

for now my scroller trigger looks like : 

  myScrollTrigger.current = gsap.to(contentRef.current, {

        scrollTrigger: {

          trigger: triggerRef.current,

          start: " +=70%",

          end: "bottom center ",

          scrub: true,

          markers:true

        },

        yoyo: true,

        repeat: 1,

        opacity: 1,

        y: 0,

      });

[React : Do i have to register gsap.registerPlugin(ScrollTrigger); in every component?]

I'm updating this if in future anyone gets in similar problem like mine , for me the solution was  this 

 

export default function useOpacityManager() {

  const triggerRef = useRef();

  const contentRef = useRef();

 

  const myScrollTrigger = useRef();

 

  useEffect(() => {

    let interval = setTimeout(() => {

      contentRef.current.style.opacity = 0;

      myScrollTrigger.current = gsap.to(contentRef.current, {

        scrollTrigger: {

          trigger: triggerRef.current,

          start: "top center",

          end: "bottom center",

          scrub: true,

          markers: true,

        },

        yoyo: true,

        repeat: 1,

        opacity: 1,

        y: 0,

      });

    }, 1500);

 

    return () => {

     clearInterval(interval);

      if(myScrollTrigger.current!=undefined){

        myScrollTrigger.current.kill();

      }

    };

  }, []);

 

  return { triggerRef, contentRef };

}

Has the opacity is 1 of the content/containers in the beginning , user dont have to wait 1.5 sec to see the content.

But without setting the opacity to 0 the animation wouldn't work so in callback function of setTimeout first thing i do is setting the opacity to 0 of the content .

Probably this isn't the best solution but after doing a lot of stuff this is the one which only works correctly for me. Thanks to anyone whom answered.

 

 

 

 

 

 

 

 

[React : Do i have to register gsap.registerPlugin(ScrollTrigger); in every component?]

5 hours ago, Rodrigo said:

https://reactjs.org/docs/hooks-effect.html

 

The array in the useEffect hook is a set of dependencies in the component's state or props that will trigger that code to run.

 

Finally as I mentioned before, I recommend you to move your GSAP logic inside each component. As I understand how easy it makes development to have some sort of factory function and I applaud the fact that you created one, it seems to be creating more problems than it's solving. I once worked in a very large app and at some point the project manager stopped almost everything, because some specific methods that would prevent us from writing lots of lines of code, were causing us to create a lot of convoluted conditions and state management in order to make them work. At the end we had to write a lot of code over and over, but the development logic and code maintenance became super easy and there wasn't a noticeable performance drop. Sometimes super elegant code is not the best choice. The code has to do what you need it to do and then you start refine it, keeping in mind that such code at some point will be looked by another developers that never worked in that project and makes sense to them.

 

Happy Tweening!!!

Hi i did as you said but the markers position is still weird but i probably know why , the problem are images. Probably as they took time to load the containers heigth is < than container with images heigth. Do you know how i can solve this problem ? setTimeout?

[React : Do i have to register gsap.registerPlugin(ScrollTrigger); in every component?]

18 minutes ago, Rodrigo said:

As Brian points, basically you're killing all the ScrollTrigger instances you have.

 

Also your set up a is a little bit funky, IMHO.

 

If I was you I'd create the ScrollTrigger instance on each component in the useEffect() hook, passing an empty array to run the code only in the initial render and store it in a constant or a ref if you prefer. In the same hook, use the cleanup function to kill that specific ScrollTrigger instance, something  like this:

const myScrollTrigger = useRef();
useEffect(() => {
  myScrollTrigger.current = gsap.to(contentRef.current, {
      scrollTrigger: {
        trigger: triggerRef.current,
        start: "top center",
        end: "bottom center",
        scrub: true,
        markers: true,
      },
      yoyo: true,
      repeat: 1,
      opacity: 1,
      y: 0,
    });
  return (() => {
    myScrollTrigger.current.kill();
  });
}, []);

Of course you have to keep in mind the trigger element and pass that either as a prop or perhaps context, depending on the depth of your component's tree.

 

Happy Tweening!!!

Hi thanks for your answer. I'm sorry but i didn't got the array part ? can you show me a little example ? I also noticed that when changing the page my trigger and content markers are in wrong position but when i reload the page they became normal.any suggestion to fix/improve it?) Thanks you for your patience. 

[React : Do i have to register gsap.registerPlugin(ScrollTrigger); in every component?]

@BrianCross and @Rodrigo

here you go guys. At first load if you scroll down it works , when you change the component it stops working

Click on the button to see what happens 

 

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

[React : Do i have to register gsap.registerPlugin(ScrollTrigger); in every component?]

44 minutes ago, BrianCross said:

I would just import the plugin into the hook like you're doing. It doesn't hurt anything to import a plugin multiple times. I would also rename the hook to useOpacityManager so React knows it's a hook.

 

I would use refs instead of class names as well:

 

import { useEffect, useRef } from "react";
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default function useOpacityManager() {
  const trigger = useRef();
  const content = useRef();
  
  useEffect(() => {
    gsap.to(
      content.current,
      5,
      {
        scrollTrigger: {
          trigger: trigger.current,
          start: "top center",
          end: "bottom center",
          scrub: true,
          markers: true,
        },
        yoyo: true,
        repeat: 1,
        opacity: 1,
        y: 0,
      },
      0
    );
    return () => {
      ScrollTrigger.kill();
    };
  }, []);
 
  return [trigger, content];
}

and then in the component:

const [triggerRef, contentRef] = useOpacityManager();

<TriggerComponent ref={triggerRef} />
<ContentComponent ref={contentRef} />

Hopefully that makes sense.

I'm having issues with 

 return () => {

      ScrollTrigger.kill();

    };     

 

I dont know why when it is there and i change the page ,  the animation in the page doesnt work . The problem is that if i remove it there are still trigger of the last page and the animation have a strange beahaviour , any suggestion?

https://i.imgur.com/zxG2bXU.gif

[React : Do i have to register gsap.registerPlugin(ScrollTrigger); in every component?]

34 minutes ago, BrianCross said:

I would just import the plugin into the hook like you're doing. It doesn't hurt anything to import a plugin multiple times. I would also rename the hook to useOpacityManager so React knows it's a hook.

 

I would use refs instead of class names as well:

 

import { useEffect, useRef } from "react";
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default function useOpacityManager() {
  const trigger = useRef();
  const content = useRef();
  
  useEffect(() => {
    gsap.to(
      content.current,
      5,
      {
        scrollTrigger: {
          trigger: trigger.current,
          start: "top center",
          end: "bottom center",
          scrub: true,
          markers: true,
        },
        yoyo: true,
        repeat: 1,
        opacity: 1,
        y: 0,
      },
      0
    );
    return () => {
      ScrollTrigger.kill();
    };
  }, []);
 
  return [trigger, content];
}

and then in the component:

const [triggerRef, contentRef] = useOpacityManager();

<TriggerComponent ref={triggerRef} />
<ContentComponent ref={contentRef} />

Hopefully that makes sense.

Hi thanks for your answer ,ill check and get back to you

[React : Do i have to register gsap.registerPlugin(ScrollTrigger); in every component?]

So i have many sections and for each section i have one component, now i want to animate every section , do i have to use :

 

import { gsap } from "gsap/dist/gsap";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

 

for every section?

like my main component is like : 

const Gali_mobile_main = () => {

    return (

      <>

        <Gali_mobile_section1 />

        <Gali_mobile_section2 />

        <Gali_mobile_section3 />

        <Gali_mobile_section4 />

        <Gali_mobile_section6 />

        <Gali_mobile_section7 />

        <Gali_mobile_section8 />

      </>

    );

}

 

i have created a hook like : 

import { useEffect } from "react";

import { gsap } from "gsap/dist/gsap";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

export default function opacityManager(trigger, content) {

  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {

    gsap.to(

      content,

      5,

      {

        scrollTrigger: {

          trigger: trigger,

          start: "top center",

          end: "bottom center",

          scrub: true,

          markers: true,

        },

        yoyo: true,

        repeat: 1,

        opacity: 1,

        y: 0,

      },

      0

    );

    return () => {

      ScrollTrigger.kill();

    };

  }, []);

 

  return true;

}

 

 

and i dont know if its correct

and in every section i do : 

          const opm = opacityManager(

            ".prod_mobile_section3",

            ".prod_mobile_section3_content"

          );

[Opacity animation on scrolltrigger like iphone12pro landing page]

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">

 

[Opacity animation on scrolltrigger like iphone12pro landing page]

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 : 

[Opacity animation on scrolltrigger like iphone12pro landing page]

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
//   }
//
//})

 

 

[Opacity animation on scrolltrigger like iphone12pro landing page]

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