Is this possible with Green Sock and Scroll Magic

[craigib]

Hi guys, 

 

So I've only done pretty basic stuff with GSAP at the minute but i've been set the task of building something similar to menu section on this link. 

http://www.johos.at

 

The scroll timeline thing with changing background / text

 

I just want to know if it's possible to build something similar using Scroll Magic and GSAP? I don't fancy investing a couple of days trying to do it to find out it's not possible. 

 

[Rodrigo]

If you're trying to replicate just the menu, I don't know if using ScrollMagic is the best approach, or at least the one I'd use.

 

Instead I'll recommend to use Draggable and ThrowProps plugin to control the animation. Here is a very simple example of controlling the progress of an animation using Draggable:

 

See the Pen Batoc by rhernando (@rhernando) on CodePen.

 

Also keep in mind that Draggable has a trigger property that allows you to update the target element by using the pointer/click event somewhere else. In this sample you can move the blue square by dragging anywhere in the grey area:

 

See the Pen IiHgq by rhernando (@rhernando) on CodePen.

 

Hopefully that helps you getting started.

 

Happy Tweening!!

[craigib]

@Rodrigo

It's not so much the click and drag effect I need sorry. It's the scrolling timeline I need so as the page scrolls the timeline moves and the background changes.

 

I'll have a play around with the Draggable and ThrowProps though

 

Thanks 

 

[Rodrigo]

Absolutely!!!, either a TimelineLite or a TimelineMax will do the trick, just create a container with an overflow hidden property and use flexbox for center it in the viewport and then create a dummy element and trigger a draggable instance anywhere in that container to update it's progress.

 

If possible create a simple example of what you have in order to get a better idea of what you're trying to do.

 

In the mean time here are some resources about using the Timeline classes:

 

https://greensock.com/sequence-video

 

https://greensock.com/position-parameter

 

Also take a look at this in order to create a reduced codepen demo:

 

 

Happy Tweening!!!

[craigib]

Brilliant thanks, 

 

I'll get working on it and update with a codepen link if I get stuck