djanes376

I second the request for REM support, it's my favorite unit and an absolute joy to use to make responsive websites

To anyone that is not the greatest with javascript and is sick of being hamstrung by sliders with too many built in features, here's a great simple slider that cuts out all the garbage. http://wallopslider.github.io/ All it does it manipulate classes (current, previous-show, previous-hide, next-show, next-hide, etc.) and then you can use css/js or both to control animation. There is also a small API so you can use the events to trigger GSAP animations however you would like. I highly recommend it if you don't want to go through the trouble of rolling your own slider but yet still want total control over your animations. Also, only 3kb minified and no dependencies. ** I did not write this plugin... I just really really like it.

From my knowledge, this is not something greensock would handle on its own. Being an animation platform it could handle the animation of the transitions but it looks like SmoothState.js is a mixture of html push state, ajax, and animation together. I would hijack the animation with GSAP for the performant animation but leverage the rest of smoothstate for the dynamic loading.

The latest one was approved by DoubleClick. Turns out the problem was a QA issue. The preview fails in their management tool but the ad runs fine. All is well!

Hey all, I'm currently working with Double Click right now through a media partner. Have you heard anything further about their support for Greensock JS? We have tried to upload a couple of ads to their GCM with links to GSAP on CDN but they were failing. Their recommendation at the time was to rebuild these ads in Double Click Studio or Google Web Designer but that seems like a woefully inefficient solution. If there was something I could point them to regarding others that have gone through this process to help move this along it would be greatly helpful. In the mean time I'll see what progress I can make. Thanks!

I played with your codepen a bit and things smooth out a decent amount changing the snowAmount to 300, gravity to 1000, removing the alpha which doesn't affect aesthetics much but improves performance. As others have said, its just the nature of animating a lot of objects in the dom that causes performance issues. Canvas would certainly render this without issue, but then you get into browser support problems. It's just a trade-off you need to make for your use. Also, it looks more snow-like when you decrease 'flake size' and add border-radius:50%; box-shadow:0px 0px 30px 20px white; good luck.

I figured that it was tied to the change from radians to degrees, yet I didn't have an immediate way of testing it. I just ran it through production and everything is back to normal, except the proper conversion for 1.5 radians is ~86, 270 made the animated element fly backwards Thanks for the swift response, I appreciate it.

I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated. Here is he snippet that makes the path and rotation: {bezier:{type:"soft", curviness:1.25, values:[{x:0, y:-200}, {x:300, y:-400}, {x:800, y:-200}, {x:1010, y:-300}], autoRotate:["x","y","rotation",1.5,true]} I can't provide the link to the source since it's a closed production environment but if it helps I can create a test page somewhere when I get some time. Thanks.

Although I didn't look into the code, I did look into your image sizes. Right now you are trying to simultaneously animate around 5mb of very large images (both GIF and PNG) with complex alpha at the same time. Not only this, but they are also being animated on scroll position. I'm no expert on browser performance but I can only imagine that is is incredibly taxing from within the browser. It even chugs on my beast of a laptop. You may want to reevaluate your design because most people will have trouble rendering this page as is let alone have it be smooth. I would recommend trying to reuse a number of smaller assets rather than using these giant ones. It would also be wise to save these images as png-24 and use something like tiny png to get optimum compression. You should get much better performance this way.

Since you have little experience with javascript/jquery and GSAP it may be a little difficult to grasp at first. As Carl suggested above you should download the superscrollorama zip from github and run the html file in your browser and look at the source code. The best way to start is just read the code, try to make sense of it and make some changes. The triggers for the animation are controlled by scrollorama and the animation itself is all GSAP. Read all the GSAP documentation you can so you know exactly what is going on and what control you have (a lot!). There is a learning curve for sure, but stick with it and you won't be disappointed.