Issue

[PaulTheSwissGuy 4 Likes (Newbie)]

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 

[Cassie 5,650 Likes (Superhero)]

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 April 12, 2021 by Cassie
attrplugin!

[PaulTheSwissGuy 4 Likes (Newbie)]

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

Have a good day/evening!

[Cassie 5,650 Likes (Superhero)]

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

🙂