Leaderboard

I'm not sure what part you mean. The scroll trigger or the morph? For the morphing, please visit the docs page for the MorphSVG plugin. It has loads of information and links to many examples. https://greensock.com/docs/Plugins/MorphSVGPlugin For the scroll trigger, you could use a 3rd party library like ScrollMagic. http://scrollmagic.io/ or maybe the Intersection Observer. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API @Sahil also provided some links for scroll trigger info in your other thread here: You can also download the source files from the demo you posted here: https://tympanus.net/codrops/2017/05/23/on-scroll-morphing-background-shapes/ We can't just build things for you, but if you have a specific GSAP question, please post a demo that demonstrates the problem or question and we'd be happy to help.. Happy tweening.

Wargaming is looking to hire an HTML5 Animator (Banners) to join the Interactive Media Team. In this role, you will create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate), resize and adapt them for various advertising platforms, and manage localization of resized/adjusted banners. The Interactive Media Team help bring new players to the Wargaming universe by delivering quality marketing digital assets: landing pages, promo web sites, animated and interactive web advertising, newsletters, and more. What you will do: — Create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate) — Resize and adapt banners according to technical specifications of different advertising platforms (Google AdWords, DoubleClick, Yandex, etc.) — Localize resized and adapted banners (30+ languages) using internal tools Requirements: — Experience creating banner ads for a variety of advertising platforms with different technical requirements — Skilled in creating complex animation, interactive features (both within the 150 kB limit) and realistic special effects (blowups, water, fire, dust) using HTML/JS/Canvas — Hands-on experience with Adobe Animate — Knowledge of browser specifics (especially IE10+) — At ease with 2D graphics (bitmap, vector); proficient in Adobe Photoshop and Adobe Illustrator — Experience working with GSAP library — Portfolio — Pre-Intermediate or higher level of English Desirable: — Experience creating games using HTML5 — Knowledge of WebGL 3D — UI/UX expertise — Experience working in the games industry — Knowledge of Russian Motivating video about why we cool Our portfolio Please, apply here

Hi @radutrs, Something like this ... Happy landing ... Mikel

Good Morning! We now have a Jobs and Freelance board sitting with the other HTML5 / JS sub-forums https://greensock.com/forums/forum/10-html5-js/ Thanks for all the great suggestions and the votes for moving ahead. Yes, we agree there are some small risks, but the potential for this leading to positive results for the community seems to outweigh those. We created some basic guidelines to help manage everyone's expectations and start things running smoothly. We'll give it a shot and adapt as necessary. Thanks again for all your help!

I got curious about this and enjoyed the challenge of making it into a single function that'll handle any number of points for you, so you can just feed in the string you want, the stagger, duration, etc. and it'll automate everything and spit back a TimelineLite instance containing all the animation Here's a forked version of Carl's: http://codepen.io/GreenSock/pen/fbb9dd44bf1c98a9842a6c05d6c1be2b?editors=0010 //this one function call does it all: staggerPoints("#hi", 2, {points:"100,-50 400,0 600,100"}, 0.5); //the work is done in this one function that spits back a TimelineLite. function staggerPoints(selector, duration, vars, stagger, onCompleteAll) { var numbersExp = /(?-)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, element = document.querySelector(selector), startPoints = element.getAttribute("points").match(numbersExp), endPoints = vars.points.match(numbersExp), applyPoints = function() { element.setAttribute("points", startPoints.join(",")); }, copy = function(obj) { var o = {}, p; for (p in obj) { if (p !== "points") { o[p] = obj[p]; } } return o; }, tl = new TimelineLite({onUpdate:applyPoints, onComplete:onCompleteAll}), l = startPoints.length, obj, i; if (l !== endPoints.length) { console.log("Error: point quantities don't match"); } for (i = 0; i < l; i+=2) { obj = copy(vars); obj[i] = parseFloat(endPoints[i]); //note: we need to make sure the values are converted from strings to numbers. obj[i+1] = parseFloat(endPoints[i+1]); startPoints[i] = parseFloat(startPoints[i]); startPoints[i+1] = parseFloat(startPoints[i+1]); tl.to(startPoints, duration, obj, stagger * i); } return tl; } Play around with it and let us know if it works okay for you.