Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PaulTheSwissGuy

Issue

Go to solution Solved by Cassie,

Recommended Posts

Hello !

I'm trying to pin an element all along my website.

For this I'm pinning it and I make it end after all the sections height combined.
This is working well :)

But I also want to change the SRC of the image in my element each time I enter a new section.
And this is where it acts strangely.

I'm trying to handle this with onEnter and onEnterBack but you can test it and see that either it's not working at all, or it's working one time on three.

Canno't we apply multiply gsap.to() tweens + scrollTrigger to a same element ?
Also it's messing up with the width and height of my original element.



Thank you 

Link to post
Share on other sites
Posted (edited)

Hi Paul!

 

It seems to be firing ok for me - however you've got a lot of unnecessary code here.

If you loop through all the sections you can then access the index of that section and use that index value to change out the src.

See the Pen a5afedb1be5eced5ffacc61ec147e9db?editors=1011 by cassie-codes (@cassie-codes) on CodePen



You also don't need to work out the height of the sections yourself! GSAP can do that for you.

I've added a container around the section elements -
If you define this container as the trigger element you can pin the tooltip until the bottom of the sections hit the bottom of the viewport.
 

gsap.to('.tooltip', {
  scrollTrigger: {
    trigger: ".sections",
    start: "top 40%",
    end: "bottom bottom",
    pin: ".tooltip"
  }
})

 

Ooh, and additionally you can use the AttrPlugin (part of GSAP's core) to swop out the URL instead of element.src-ing

Edited by Cassie
attrplugin!
  • Like 4
  • Thanks 1
Link to post
Share on other sites

Wow ! Thanks a lot Cassie, this is exactly the help I was looking for, plus the little tips it's perfect.

I swear this forum is so peacefull compared to stack overflow :D

Have a good day/evening!

  • Like 2
Link to post
Share on other sites

Ah, I'm so glad, and I agree! It does feel like a little internet-haven here.

🙂 

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×