scrollTrigger in wordpress

[jerryB]

I have a clamshell like product that we have created an animation with 36 images like the intro on https://www.apple.com/macbook-pro-16/ ... I was able to use the info in tutorials to build and it works; until I put it in a WP page, then all the content below it scrolls right over (or under) before the animation finishes, and then the last image sits there because the canvas is set to position:fixed; I found the below string, but didn't see example of this animation where the animation, when done, scrolls off the page as the rest of the content comes ... I thought maybe doing it with GSAP/ScrollTrigger would be better, but I couldn't find any direct comparisons; help! 😃

 

[GreenSock]

Welcome to the forums, @jerryB. 

 

It's pretty tough to diagnose blind (a minimal demo will significantly increase your chances of getting a good answer), but I assume you just need to use the pin feature. I'd encourage you to read the docs and watch the main video. There are a lot of demos available too. 

 

Good luck with the project!

[jerryB]

thanks, here's a demo this is pretty much what happen in wordpress, content just scrolls thru and the animation container site there

[Cassie]

Hi Jerry - 

This pen isn't using GSAP so I'm not sure what you'd like us to help with. If you're trying to convert that pen to GSAP the thread you linked to will be very helpful, and as Jack said, so will the docs!

Maybe this will help if you're looking to pin the section with the image animation?

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

[jerryB]

yes, thanks, that was the goal, to convert it ... I took a whack, and it's to the point where I can use it, I think thanks

See the Pen xxrEyxg by jerryklunk (@jerryklunk) on CodePen