Is there a GreenSock script that would accomplish this?

[ThePixelPixie]

I've been trying like mad to figure out how this panel on the https://www.wealthsimple.com/en-ca/product/cash website was done. Are there any of your examples that I've missed that might do this, or something similar?

 

Thanks in advance.

 

~Laura

[Cassie]

This thread should help!
 

 

[ThePixelPixie]

Oh my! That's getting me pretty close! Thank you SO much!

 

I am still extremely new to gsap, so please pardon my lack of knowledge here:

 

I'm having trouble positioning these things on the page. When I try to move them around, the text turns green at the wrong place. Ideally, All of this would appear on the right side of the video, vertically centered.

 

Then the other issue I don't know how to solve is making the text fade from transparent up to green, then fade out to transparent when it goes back up (and of course in reverse if scrolling the other way).

 

See the Pen zYwRWMZ by ThePixelPixie (@ThePixelPixie) on CodePen

 

Just found this pen with the text fading in and out on the x axis. That's basically what I'd like to do with this text on the y axis. But I'm just not figuring out how to combine the pieces of the two.

 

See the Pen WNrYNQX by GreenSock (@GreenSock) on CodePen

Edited July 28, 2021 by ThePixelPixie
Forgot to mention vertically centered, added 2nd example pen

[Cassie]

Hey Laura,

We try to keep these forums GSAP specific, and there's a lot of different aspects to this.

 

This is a CSS / positioning issue. My advice would be to get your layout correct before adding any Javascript or animation.

16 hours ago, ThePixelPixie said:

I'm having trouble positioning these things on the page. When I try to move them around, the text turns green at the wrong place. Ideally, All of this would appear on the right side of the video, vertically centered.

Rather than just copy pasting someones solution into your pen. I'd suggest you fork that solution and work on it in isolation until it's doing what you want it to, and until you understand it.

Here's a refactored pen from the previous thread. I've commented sections to show what's happening, is there a particular part you're unsure of? I'll happily step you through it - it'll help a ton more than fixing that pen for you.

See the Pen vYmRYvr?editors=0010 by GreenSock (@GreenSock) on CodePen

If you want a transparent fade, you'll need to animate the opacity rather than the colour, 

[ThePixelPixie]

@Cassie,

My apologies. I thought I *had* forked that codepen with the video. The other one was posted as an example of what I was wanting to do with the fade, so it wasn't forked.

 

Also, I do know that it's a CSS positioning issue. But when I get the "meet us at the mall" positioned correctly, and then "for" positioned correctly, the scrolling text isn't in the right place. I'm not understanding how to position that part properly, I think. But I will keep working at it. Thank you.

[Cassie]

No need to apologise. The video pen has an additional section following it so I'm just recommending that you strip it back a bit.

Remove the JS and get the layout right - Once you have the layout sorted we can work on lining up the animation. It's all down to the 'start and 'end' positions of the triggers.

I've added markers so you can see where they are. But definitely fix one place at a time, if you're trying to tweak layout *and* adjust the positions of the triggers at the same time things will get really confusing.