Sahil

Here is short tutorial series, that will help you learn all the basics of ScrollMagic.

That's because you were changing it's visibility on wheel event rather than on scroll event. https://jsfiddle.net/jh42z38z/ Also, try posting your demos using Codepen, most of forum members are used to it. If you want to continue posting using jsfiddle, post your link within post instead of posting it in textbox with label 'Codepen URL' because jsfiddle links don't show up in post when you post it like that.

Unfortunately, I recently had some issues with my system and I am yet to completely restore it. So I won't be able to edit svgs. following is similar thread and there is example you can use. So basically you hide your mouse cursor and use element as cursor, that site is setting css property 'pointer-events' to none so you can click through the cursor element. You can use polyfill for it. Following is another thread you might want to take a look at. Finally, that mousedown animation is simple. Those arrows are hidden, so their opacity is turned to 1 from 0 and circle is scaled up. Hope that helps.

@GreenSock or @Carl will have to respond to it. I think it will be a impossible hack it and add feature to destroy and recreate it at the moment. When Jack says record, I guess there is some kind of timeout until when GSDevTools records any timelines, there has to be a good reason that we are not given option to change this record time span. Even if you manage to destroy and recreate, you will have to start recording before you create new timelines. After that you will lose access to all previous recorded timelines. But I am just guessing.

Here is the reply by @GreenSock in another thread. At the moment I don't think there are any methods to update GSDevTools, but it seems like useful feature so maybe it will get added in future. I tried to change your pen and redefined variable after timeout but like Jack says it only records anything created in first 2 seconds (probably few milliseconds less than 2 seconds in practical use).

I have edited same demo so you will have to rename everything. Again, this is just a demo to show you how it can be done. That site also supports gyroscope, you can do that by using parallax js.

Take a look at following thread. As I said in that thread, you might want to use parallax js. Just instead of animating x,y you will need to change rotationX and rotationY, I am not on PC anymore so can't post a demo.

Another example using scale to animate container.

Here is the demo.

Yup it works smoothly for me, unless any video takes time to load. While your videos when I tried, they zoom well if they have loaded already, but while zooming out they seem to stutter a bit. If I am guessing correctly, zooming gets messed up when there are network requests. Others will have to confirm it, but zooming out will need better FPS for sure. I tried to change the event to 'canplaythrough' but it is still hit or miss. This article might help you. Just curious, why don't you create entire video in something like blender/after effects etc as you want and use it on site?

Alright, issue is that GreenSock has default ease of Power1.easeOut that's what was causing it. You can set global ease to Linear.easeNone or set it on individual tween. https://codepen.io/Sahil89/pen/mqLNVg

Please post a demo with code specific for this problem, it won't be easy to check it on live site.

You just need to reduce distance it travels to get similar effect. https://jsfiddle.net/875a3t72/

That's most probably because list on left side goes up and covers shorter distance to go out of view while one on right covers longer distance, so they will never be in sync. Try placing them in center, give them all same height as that container, then they will align perfectly.

I don't think issue is with zooming. Your video is 24 FPS, I doubt that will give you smooth effect. I replaced it with a 60FPS video from youtube and it looks smooth to me. WARNING: demo will auto play 3 videos from youtube.

3. Oh or you can write about your scroller library maybe and how you can move on from using ScrollMagic? or GreenSock has any plans for it to replace ScrollMagic?

Well most of the things you cover in the forums. So I guess it's upto you, what you feel like people need to learn or maybe things you feel like should be part of the blog so those who go through blog can access it. Maybe series of articles including tips and tricks by you. Or there is always that question by many about how to create some great website they come across. So maybe a small series that shows very simple example of single page site that shows how to create something using SVG, Canvas together. Just yesterday I came across a site that was using Canvas as background, other elements with SVG and HTML and in the comments of that video someone was asking Kirupa how he can make that website. Not good idea maybe but maybe more like a myth buster so people will realize it will be more than simple or set anybody in right path who wants to learn it.

That seems ok to me, I think looking more into how to raise events/callbacks on canvas will help you. For example if you raise event/callback when mouse enters certain grid and leaves, you can use a tween that will update the color value externally without getting called unnecessarily. @OSUblake has great experience with such things, but not sure when he will be online.

Ohk I found the issue, it is because your scroll function returns paused tween. It takes control over all the elements and because you are using from tweens inside timeline, it renders all elements to their end position and pauses itself, which overrides everything. If you remove paused: true from the timeline returned by scroll function, you will see what is happening. I tried to trigger scroll function when onload animation finishes but I don't know exactly what to suggest, a limited codepen demo would be a lot easier to understand visually. Following is the what I tried to quickly have something to test. Following is the video that explains what immediateRender is, it reminded me how I was super excited about using from tween everywhere just to later find out how it gets really tricky.

I tried console logging onComplete callback, and only few tweens(around 20-30) complete the tween. I don't know if there is any limit on maximum number of tweens but at the moment you are creating around thousand tweens every second. Out of which only 20-30 are able to complete. I don't know solution to it but if it is possible for you to create events every time there is mouse event, that will be a lot more efficient.

That's because you are adding new tween into same timeline every time your mouse enters or leaves. And timeline waits for previous animation to finish before it starts playing next animation. Simpler way would be to use TweenMax or Timeline inside the event.

Interesting. It happens because 'named elements' (elements that have id or name) are added to document object as properties, that's why it works. But in general you should stick to writing string as '#light', it saves you from potential conflict issues where you might use variable with same name as id. If that's confusing you, using light works in most browsers but I will suggest to practice using '#light'. Here you can read more if you are interested.

One question for now, are you sure onload and ScrollMagic enter events are not overlapping?

You need TweenLite first, it is the lightest with limited features. You can then use other plugins with it. For example, based on your current code you need TweenLite, TimelineLite and CSSPlugin. Here you can read about which plugin does what: https://greensock.com/docs/Plugins Here if you click on download button, you will see different options like Robust, Lightweight, Customize which can also give you some idea about which plugins to use. https://greensock.com/gsap

Coincidentally I came across this page today. In both Firefox and Firefox developer edition, FPS drops below 5 while using GSAP, in chrome it touches 60 FPS. Is it old test page or something has changed with Quantum? Or 2x speed of Firefox still not enough compared to Chrome?