akapowl

Hey @jiggy1965
 
I think, what you actually want to use is the delay property inside the vars, and not the position parameter, that is meant for timelines.
 
Also, you can simply just write 'left: 400' instead of left: "400px" -
And maybe you'd also want to consider translating the element on the x-axis instead of tweening on the left-value.
 
 

See the Pen e0519abae681ece9fdbed9abec396bce by akapowl (@akapowl) on CodePen

@niklasinla
 
What about this way?
 
start: () => "top " + header.offsetHeight  
 

See the Pen cccaefeaeff7dd3ad101c3e06019b5f7 by akapowl (@akapowl) on CodePen
 
 
Edit:
Sorry, had to make some changes, to make it responsive on resize.
 

@Samuel7
 
I just made some changes to my pen because the way I had it set up, it actually did not work for tweening on those dynamically added headlines.
 
To make tweens also work on all those dinamically added elements, I transfered the setup of the timeline (and the creation of the sidemenu-div, too) into the check for firstToggle on click. See the changes in this pen:
 

See the Pen defd0bb740da609e6a25d2f06adb714b by akapowl (@akapowl) on CodePen
 
 
Edit: 
Also, please note, that I made some changes to the syntax of your tweens.
 
 
 

Hey @lklio
 
Here's how you could do it, without having to make any changes to your HTML/CSS setup:
 
 
 
1) Differentiate between allSections, firstSection and otherSections (meaning other than first)
 
2) For the firstSection, split your one ScrollTrigger for the image-animation and pinning into two seperate ScrollTriggers, each handling one part. The first one, handling the animation, runs shorter than the other one for the pinning - the later one has to run longer, so it makes the sliding-in-over of the next section possible, when your animation of the image has already finished.
 
3) Set each of your other sections down on thy y-axis 100% initially ( to make sure, the second section won't come scrolling into view, when your first section is still animating - and keep the ScrollTrigger for them as you had it setup for each section in your pen.
 
That was the 'waiting for the animation to finish' part.
 
4) For updating the current slide ( as you can see in the console, when you fork the pen below and look at it in debug view ), I would suggest, you set up yet some more ScrollTriggers, but this time for each single one of the sections, with which in the callbacks you can update the current slide in whatever function you want it to - in my example, I used the onEnter and the onLeaveBack with the start of the trigger set to when the top of the section enters/leaves the bottom of the window.
 
 

See the Pen ba2ce428b2573c3c96eecd8b02abc0a2 by akapowl (@akapowl) on CodePen
 
 
I might be overcomplicating things - but I couldn't see any other way, without making changes to your HTML/CSS setup.
Hope this helps, makes sense to you, or at least inspires you on how to handle things.
 
Cheers,
Paul
 

Hey @Martagnan
 
Actually, the method Zach provided works just as intended, you simply just do not define what the variable 'videoElem' is supposed to be hooked up to in your js.
 
For targeting multiple videos individually, you should loop over them.
 
Take a look at this example, that shows, how you could possibly set things up.
Note, that I made some slight changes to the HTML/CSS you were using, just to get the setup right.
 

See the Pen d73fc3fb1d1fbe50291733da67149879 by akapowl (@akapowl) on CodePen
 
 
Hope this helps get a better understanding.
 
Cheers
Paul

Hey @Sanprieto - welcome to the forums.
 
There is .time()
 
Is this what you're looking for?
 

See the Pen 3cd383d2720957175420d81d625935ec by akapowl (@akapowl) on CodePen
 

Hey @zloycoder - welcome to the forums.
 
My first piece of advice on this would be to not use ScrollMagic, but GSAP's own ScrollTrigger plugin. 
It is just so much more capable than ScrollMagic in every imaginable scenario.
 
There have been several questions about the effects on that page.
I'll link some for you, hoping, that I got correctly, which effects you were referring to.
 
1) Rolling Text
 
 
 
 
 
 
2) Image Change
 
 
 
Hope this helps.
 
Cheers,
Paul
 

Hey @Tigranchik
 
That is mainly related to using a fromTo-tween on your 
 
$('.expertise:lt(4)')  
so that third tween-instance in your timeline, that overwrites the values on your first tween when set up.
 
Just changing it to a .to tween already did the trick for me.
 
But also, I'd highly recommend migrating your code to the new syntax.
 
 
 
Here is a working example of what things could look like:
 

See the Pen bbbb33f522892b88f630ddf25c7f0db8 by akapowl (@akapowl) on CodePen
 
 
Edit:
What you could also do (if you wanted to keep it as a fromTo-tween), is add
 
immediateRender: false to that tween, so it doesn't render things neccessary right away, when it's being set up but only, when it's played.
 

See the Pen 58b8eea5361e892de076936bdc6ae91e by akapowl (@akapowl) on CodePen
 
 
 
Hope this helps
Cheers,
Paul
 
 
 

Hey @Jasmine - welcome to the forums  
 
I can not give you a name for that animation because it is absolutely non-standard.
What I can tell you though, is that they most likely make use of WebGL for that sort of effect.
 
There are quite a few good WebGL helper libraries out there, like three.js 
But wrapping your head around WebGL, especially around the neccessarry shader related things won't be trivial.
 
You can find quite a few examples of image transitions with WebGL on codrops, if you search for either WebGL or three.
 
That could be a good start point for you to get going.
 
GSAP can and will be helpful, when wanting to animate effects like these, but straight up building that sort of effect is not what GSAP does/can do.
 
 
Hope this helps.
Cheers,
Paul
 

Hey @callmegoon
 
I think it is only just 'target', but if you want to make use of it with jquery-functions later, you'd have to wrap it accordingly, like so
 
var element = $(target);  

See the Pen 07089c5c7430d8acee308feb6919f65f by akapowl (@akapowl) on CodePen
 
Is this, what you're after?
Hope it helps.
 
Cheers,
Paul
 

Hey @r0skar - welcome to the forums
 
One thing you could do, is set up two individual ScrollTriggers, one that handles only the pinning when the top hits the top of the screen, and one that fires the video playback when the top of the video hits the bottom of the screen.
 
Cheers
Paul