mouse scroll up/down effects

[topsyKretts]

hi guys,

 

can you help me how to create on codepen the animation similar to https://us.pg.com/  (mouse scroll up/down effects or click the buttons right sidebar content), its better if we can include the state(active) on the right side. see attached image:)

 

thanks guys!.

 

 

 

See the Pen OJJBgVY by graydirt (@graydirt) on CodePen

[GreenSock]

Welcome to the forums, @clag!

 

If you have a GSAP-specific question, we'd be happy to help, but we just don't have the resources to build something like that for you from scratch in codepen. 

[topsyKretts]

1 hour ago, GreenSock said:

Welcome to the forums, @clag!

 

If you have a GSAP-specific question, we'd be happy to help, but we just don't have the resources to build something like that for you from scratch in codepen. 

 

im sorry about that, ive updated the content above. any Q's let me know..

 

thanks team!

[GreenSock]

Hi @clag. Did you have a GSAP-specific question we could answer for you? 

[topsyKretts]

Just now, GreenSock said:

Hi @clag. Did you have a GSAP-specific question we could answer for you? 

hi guys,

 

can you help me how to create the animation similar to https://us.pg.com/  (mouse scroll up/down effects or click the buttons right sidebar content):

[ZachSaucier]

Hey clag.

 

What GreenSock was saying is that this forum is for help with specific issues especially related to GSAP. What you're asking for is general help/us to make it for you. Unfortunately we don't have the capacity to do that. 

 

If you have specific questions about GSAP please let us know. Otherwise, good luck with your project!

[elegantseagulls]

Hi @clag,

 

The example you sent looks to just be scaling in/out new content from the center for the key-hole effects, and for the floating bubble effects they are using transform: translateZ(); with a 3d perspective. They are then tying all that to a scroll event handler (a lot of folks like to use ScrollMagic for that, but that isn't a GSAP product).

I don't believe the PG site is using gsap specifically, but to replicate the effect, you'd want to build a timeline gsap.timeline().... that creates the experience you want, and then scrub through the timeline progress with the scroll event.

 

There are plenty of tutorials that can get you pointed in the right direction as far as getting things setup.

https://greensock.com/scrollmagic/ This is a good one, but I think ScrollMagic is tied to GSAP v2 (not sure); look specifically at the horizontal scrolling section, as that will give you the basic concepts of what's happening on the P&G site.

 

Here's an example of a scroll-tied animation that uses mousewheel event instead of tying to scroll (more like the P&G site):

See the Pen VoWKbX by elegantseagulls (@elegantseagulls) on CodePen

 

I hope you find this a helpful.

 

Thanks,

Ryan