[Run Timeline on Pinned element using ScrollMagic without the element being 100vh]

I was updating to make clearer that the body is moving below the element itself. How would I control the rest of the page scrolling with position:sticky?

 

Apologies I'm struggling to understand the example you gave.

 

I'm also getting an error that requestId is not defined when I try to implement myself.

 

Thanks! 

[Run Timeline on Pinned element using ScrollMagic without the element being 100vh]

Hi Zach,

 

Thanks for the speedy response! So the position:sticky concept replaces the need for Pinning?

 

With that in mind would it still be possible to control the GSAP animation timeline within the element via scroll?

 

Thanks,

[Run Timeline on Pinned element using ScrollMagic without the element being 100vh]

Hi there,

 

Is it possible to pin a div that isn't fixed to 100vh, stop the page scrolling but scroll through the TimelineMax, and then begin scrolling of the page again after the TL has finished?

 

Not only pausing the page scrolling (as there's content underneath the animating elements that I want to continue to, not scroll on top of), but how so I also avoid the scene hijacking my styling (ie margin, position, padding etc), in the codepen attached you can see that the element moves to the left of the screen then pops back when it's unpinned.

 

Thanks in advance!

See the Pen PoqxoBx by Robhern135 (@Robhern135) on CodePen

[Apply Timeline only to selected element, where there are multiple duplicate elements on the same page]

Thanks for your great help so far, I've made great strides today!

 

I understand that ScrollMagic isn't a GSAP product, but I figured asking on here would be a great bet as the products are used so closely together so commonly.

 

I'm looking to achieve the same as above, the elements timelines triggering separately from the same TL, but instead of on click now using Scrollmagic trigger points and scenes.

 

I've got this far 

See the Pen wvwEXbX by Robhern135 (@Robhern135) on CodePen

 but it looks like I've not understood the foreach-ness of the scenes/controllers as the indicators are all stacked on top of each other and triggering all at once.

 

Thanks! 

[Apply Timeline only to selected element, where there are multiple duplicate elements on the same page]

Fantastic! Thanks so much @Shaun Gorneau! New to the forum here, am I okay to post further in this thread if I find issues with my further development, or should I start a new thread?

 

Thanks!

[Apply Timeline only to selected element, where there are multiple duplicate elements on the same page]

Hi,

 

I'm trying to have the same timeline apply to multiple elements of the same classes on a page, but only when they're clicked. 

 

In time I'll integrate ScrollMagic and have this happen only when they're in the viewport, but for now I'm just working on when they're clicked for clarity.

 

I've got this far so far as in the Codepen () but there's some strange things going on, any help would be much appreciated.

 

I've condensed my example down somewhere in the timeline changes for simplicity, hope that helps.

See the Pen WNegMMJ by Robhern135 (@Robhern135) on CodePen