Jump to content
Search Community

Issue

PaulTheSwissGuy test
Moderator Tag

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 comment
Share on other sites

  • Solution

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 comment
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.
×
×
  • Create New...