[Change text size using timeline and Scrolltrigger]

Woah thank you so much @akapowl!

 

[Change text size using timeline and Scrolltrigger]

Hello all,

I would like to create the scrolling text effect on the left side of this video (where the list elements either get bigger or smaller when you scroll)

 

I think I  would have to put  scrolltrigger inside a timeline but I am struggling to implement this

 

 

 

 

See the Pen oNZdBzm by BobuShmurda (@BobuShmurda) on CodePen

[Create Scroll Trigger demo in React]

Hello All,

Please can someone help me convert this codepen to react. I tried to remove some of the fluff (like the loader and some css) but it seems the scroll animation freezes halfway through after my changes. Specifically, I would like to also get this demo to work without including

document.body.style.overflow = "auto";

https://codesandbox.io/s/muddy-sound-qqvud?file=/src/App.js

 

See the Pen BaogqYy by noeldelgado (@noeldelgado) on CodePen

[React.js Continuous horizontal text animation]

Hey @Rodrigo

 

Your code works like a charm, but there's still something I cant figure out from it.

In the website https://takeboost.com/ if you scroll all they way to the bottom there is a  marquee there which has no gaps between the texts. And the texts are on a single line.

The reason I say this is because when I tried to add more text elements to the marqueeTexts array the texts began to overlap each other and also when I tried to remove the gaps by dividing screen width by 5 in the return statement the texts began to go on multiple lines instead of a single line in the example

  const marqueeInitialSet = () => {
    gsap.set(marqueeElements.current, {
      xPercent: -100,
      x: function (index) {
        return (screenWidth / 2) * index;
      },
    });
  };

Any help would be appreciated to try get that marquee effect on https://takeboost.com/ 

[React.js Continuous horizontal text animation]

Thanks so much guys!

[React.js Continuous horizontal text animation]

Hey everybody,

I am a React developer and I am struggling to implement codepen examples into my react code...

I say this because I have seen multiple codepen examples on how to create a continuous loop of text going across the screen

What I am struggling to do in react is to clone the text element and append it to the main div (this is what i think you guys are doing in the examples)

Because I struggle with migrating codepen code to react code the best I could do was to create a codesandbox with my code (I'm using the npm package react-gsap)

https://codesandbox.io/s/dazzling-cloud-8lsrm

 

So as you can see Im struggling to make the text continuous because as it moves there is an empty part at the beginning, instead of continous text

 

Any specific React help would be greatly appreciated(btw i'm using next js)

[Scrollytelling]

Thanks so much @akapowl !

I'm new to the community and am very grateful I recieved help so quickly

[Scrollytelling]

Hello All,

 

In https://takeboost.com/ there is a bottle that spins when you scroll 

How would one accomplish this..

 

Thanks