Leaderboard

the basic idea is to loop through the svgs, assign each one its own animation. When you mouseenter/mouseleave you then play and reverse that item's animation. As for keeping borders static you probably will need to nest the svg in a parent with overflow:hidden this should be a good starting point for you

Hi and welcome to the GreenSock forums and Club GreenSock! Sorry to hear you are having troubles. To load GSDevTools there are 2 steps. 1: Make sure you are loading GSDevTools into your page, most commonly via a script tag. In your example it would be like <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script> <script src="js/GSDevTools.js"></script> <script src="js/index.js"></script> It doesn't matter if you load TweenMax from the CDN or locally 2: Activate GSDevTools using GSDevTools.create(); I've updated the demo you created to load and activate GSDevTools CodePen has a feature that lets you export Pens as zips so you can download and run them locally. I will PM you a version that works locally in just a minute.

I’m looking for talented developers with high animation skills. I work for an agency specialized in developments of campaigns for big brands. These are good examples of the quality we are looking for: https://bannerboy.com/brain/?post=converse-chuck2-knit-320x480 https://bannerboy.com/brain/?post=google-gsp16-bike-300x250 https://bannerboy.com/brain/?post=duracell-gamer-halo-300x250 For more information please send me an email here with your portfolio. thanks!

Hi @jxtfadi Do you have a question about that effect or were you showing something you created? Just let us know if you have a GSAP related issue. We're happy to help. Happy tweening.

Hey Frunky! Allow me to butt in here. Animated displacement effect with SVG is not hardware accelerated and not performant at all. If that's the effect you are after, you will want to use Canvas (or a library that uses WebGL).

Erm...? Pretty illustration...

It looks like they're using three.js and that's the displacement map for the transition. You could make it happen with a Pixi displacement filter too. http://pixijs.io/pixi-filters/tools/demo/ http://pixijs.download/dev/docs/PIXI.filters.DisplacementFilter.html You'll want to use a Power of two image (512x512, 256x256, etc.) for the best results. Good luck with your project.

@Carl meant that we can't really troubleshoot a live site (or page) as we have no idea what should be happening and no way to edit the code. If you can create a simplified demo that shows the GSAP related problem, we're more than happy to help with that. Thanks and happy tweening.

Sorry, I really don't know what your site is supposed to look like or what it is supposed to do. I looked at the homepage and didn't see any errors. We really have to keep our support focused on the GSAP API. Kind of tough to trouble-shoot why a live site isn't loading properly.

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

Back in the day, I would do the whole 9 yards... Minify HTML, CSS, JS, SVG, compress the images, inline some of the assets. If you have a limited amount of KB, you have to squeeze the orange all the way, man.

sorry, but it is very difficult to answer performance questions without some way of seeing what you are doing. Do you have a link to a reduced test?

probably, you could .progress(0)/seek(0) on that animation.. set() is adding zero duration tweens.. which is somehow diverges syntactically from the intention.

@PointC Got it! Thanks for your help. Found the solution with your answer. Found this one -> https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/ - its exactly that effect. Thank you

The animation wasn't running when I called .set(). When I called .set() it wasn't able to properly reset all of the starting positions/properties the way I needed it to. It would have been a lot of work to set each individual element of my array back to the starting points. Thankfully the .pause() function saved the day by doing a lot of the heavy lifting.

Since staggers expect the first parameter to be an array of targets, you've gotta handle things a bit differently. I whipped together a "staggerArray()" helper function for you (customize as you see fit): var a = [0, 0, 0, 0]; staggerArray(a, [10,20,30,40], {duration:1, stagger:0.5, round:true}); //vars accepts: duration, stagger, round, as well as any typical vars for TimelineMax (like onComplete, onUpdate, repeat, yoyo, etc.) function staggerArray(start, end, vars) { var tl = new TimelineMax(vars), proxy = {}, duration = vars.duration || 0, stagger = vars.stagger || 0, proxyUpdate = function(original, proxy, i) { return function() { original[i] = proxy[i]; }; }, v, i; for (i = 0; i < start.length; i++) { proxy[i] = start[i]; v = {}; v[i] = end[i]; v.onUpdate = proxyUpdate(start, proxy, i); if (vars.round) { v.roundProps = i + ""; } tl.to(proxy, duration, v, stagger * i); } return tl; } Here it is in action: Does that help?

I'm not sure I follow everything correctly. You said you wanted the main links to display the same initial SplitText animation on hover? Since those links have already animated into view on load, how did you want them to have the same animation? Should the letters disappear and animate in again? Most anything is possible. I'm just not sure what should be happening here. Changing color on hover: are you targeting the <li> or the <a>? If you're creating a timeline in an each() loop for those .menuLinks you'll want to target the <a> element. So something like this: tl.to($(this).find("a"), 1, {color:newColor}, 0) I also didn't see any timelines or animations for those main links in your new pen. Maybe you're still working on it? If you can start putting those timelines together with what you want to happen we can most likely point you in the right direction. Happy tweening.

Hi and welcome to the GreenSock forums, Thanks for the demo. Does reversing the animation do what you want?

Hi @jiggles78 I'd recommend focusing on one animation piece at a time and try to recreate it. It's like the old saying: "You eat an elephant one bite at a time." Eventually all those little animations will make a great website. I don't know of any tutorials that will take you through every aspect of the showcase sites, but Petr Tichy has a deconstruction playlist on his YouTube channel. You may find it helpful. https://www.youtube.com/user/ihatetomatoesblog/playlists Hopefully that helps. Happy tweening.

I also read the question a few times and got a bit lost too. It does seem to be an overwrite issue with those new timelines and targeting the same class. If you could you just take this step by step and create a simpler demo, I'm certain we can point you in the right direction. Happy tweening.

Hi @bignose Welcome to the forum and thanks for joining Club GreenSock. If I understand your question correctly, you'd want to use the position parameter on the autoAlpha stagger tween. Your first stagger duration is 1 second so you can set a position parameter of 1 second on the autoAlpha stagger and it will start when the first element in the first stagger tween completes. tl.staggerFrom("grid-item", 1, { y:-10 }, 0.3); tl.from("grid-item img", 1, {autoAlpha:0 }, 0.3, 1); More info about the position parameter: https://greensock.com/position-parameter Hopefully that helps. Happy tweening and welcome aboard.

Is there any way you could create a more reduced test case without all the steps necessary? I tried clicking on the "This triggers the alert overlay" button and immediately got a JavaScript error: Same thing when I click on the perimeter overlay button. Maybe I'm totally misunderstanding the directions. I read your question about 4 times and it's still pretty fuzzy to me what exactly you want to happen or how that corresponds to the 60-ish lines of code. It looks like you've embedded a function call into your timeline, and that function creates a whole new/different timeline that infinitely repeats. So every time you play that first timeline again, it's triggering that function call which creates another timeline again...and again...(each time) and you're likely getting overwriting or odd starting positions based on the timing of clicks. That's not a problem with GSAP, though - that'd be just a logic issue in the code. For example, if the infinitely repeating animation is halfway through one of its iterations when that function gets called and the [redundant] animation is created, it'd start from the current values at that time (which are halfway through an iteration). See what I mean? Just looking at the code, I get the strong impression that there are just some logic issues and there's likely a much cleaner way to structure your animation logic but I'm not entirely sure how to advise you because I don't understand all the goals and requirements. Again, a very simplified example of just a part of this would be super helpful, and then you can build up from there. In other words, try baby steps first rather than attempting to wedge every ounce of functionality into the logic in the first place.

Ironically, the "/latest/" CDN link you're using, https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js, is really old. CDNJS dropped support for "latest" years ago, so it's way out of date. Please use the most recent version, 2.0.1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js I'm running out the door, so I don't have time to wrap my head around all the steps and what might be happening, but I figured I'd tell you about the version thing and see if you can give that a shot and let us know if you still run into the problem.

Welcome to the forum. There are numerous threads about parallax available. You can use the forum search feature to find quite a few. Here are some to get you started. Happy tweening.

Just to add a little more to @Carl's excellent advice and information: //You have this on line 8 menuLinks = $('#menuLinks') // then you're using it for your each() loop on line 32 menuLinks.each(function(index, element){ However, that is a class, not an ID so you need to change your variable to menuLinks = $('.menuLinks') If you make that switch, you'll be able to target those links in your animation. The other issue is you are setting some hover colors in your CSS, but your timeline tweens are trying to animate color. That won't work correctly. I'd recommend removing the hover color in the CSS and letting GSAP take care of that for you. If you want the strike-though to animate, you'll have to add an element to each of those <li> tags. It could be a pseudo element or an absolutely positioned div and animate its width on hover. Here's a fork of your pen with some changes. I added a simple opacity to the hover timeline so you can see that it is working. You'll have to decide what to do about the hover colors. I also commented out line 32 as I had no idea what it should be animating. It's targeting child menuLinks of the menuLinks, but there are none so I wasn't sure why it was there. Hopefully that helps. Happy tweening.

Thanks for the demo. To answer the first question, the reason the staggerFromTo() animation on the text was happening too early was because you had the "complete" function in the place of the position parameter. bad: complete is in the wrong place so the position gets set to an absolute time of 0 tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, complete); good: using the position parameter of "+=0" means add this 0 seconds after the previous animation has ended. You normally don't need position of "+=0" because its the default value, hower since you are using the onCompleteAll parameter, you need to put something in for the position tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, "+=0", complete); I added a background color to the menu so that its easier to see what is happening

When you load an svg like that you can't access the internal paths and shapes of the SVG. If you want to keep your markup clean you will have to inject the SVG data into your document. Please see solutions offered here:

Name this index.php and place it in the same folder as skin-right.html etc. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Overview</title> <style> body{ margin: 0; padding: 0; background-color: #333; } .banner{ font-family: arial, sans-serif; background: #ccc; float: left; margin: 0; } .banner iframe{ margin: 0; float: left; } .banner h2{ font-size:12px; margin: 0; padding:10px; background-color: #000; color: #fff; line-height: 1; overflow: hidden; clear: both; display: block; } .banner a{ text-decoration: none; color: #fff; } </style> </head> <body> <div class="banner"> <iframe src="skin-left.html" width="640" height="1500" frameborder="0"></iframe> <h2><a target="_blank" href="skin-left.html">Skin left</a></h2> </div> <div class="banner" style="margin-top: 131px"> <iframe src="leaderboard.html" width="728" height="90" frameborder="0"></iframe> <h2><a target="_blank" href="leaderboard.html">Leaderboard</a></h2> </div> <div class="banner"> <iframe src="skin-right.html" width="640" height="1500" frameborder="0"></iframe> <h2><a target="_blank" href="skin-right.html">Skin right</a></h2> </div> </body> </html> Set up a server with your terminal: php -S 0.0.0.0:8000 And open your browser and go to: http://localhost:8000/index.php

I think you're looking for the ThrowProps plugin. https://greensock.com/throwpropsplugin Docs: https://greensock.com/docs/Plugins/ThrowPropsPlugin It's a Club GreenSock member perk. More info: https://greensock.com/club Happy tweening.

Hey fellow GreenSockers, A quick tip for animating SVG text by character. Have you ever wanted to animate the individual characters of some SVG text? SplitText is a fantastic plugin but doesn’t work with SVG text nodes. You can wrap your individual letters in <tspan> elements, but that doesn’t give you a whole lot of control or options. However, you can break a string into individual characters, add them to individual text nodes and line them up in the SVG so they look like a complete word. You can now control the animation for each character and you have almost every animatable property available to you. It’s certainly not as good as SplitText but can work well when you need it. Happy tweening.

Because you're just checking if there something called "mouseover" on a jQuery object, which there is. It's called a truthy value. https://developer.mozilla.org/en-US/docs/Glossary/Truthy // Try it console.log(Boolean($(".scale").mouseover));

Join Club GreenSock... https://greensock.com/club That's what the ScrambleTextPlugin does. https://greensock.com/ScrambleTextPlugin

Your SVG is almost 4,000 lines of code with 10,000 DOM nodes. A lot of it doesn't even look important, like all these empty path coordinates. <path fill="#C9D0D2" d="M637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9 C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,398,637.1,398,637.1,397.9c0,0.1,0,0.1,0,0.1 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0 c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c-0.5-0.3-0.8-0.7-0.8-1.1l0.6,7.5c0,0.8,0.4,0.8,1,1 c0.6,0.2,1.3,0.2,1.9,0.1c0.7-0.1,1.1-0.2,1.1-1L637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9z"></path> You might want to run your SVG through an optimizer, like SVGO. https://jakearchibald.github.io/svgomg/

Maybe with canvas. PixiJS is a good choice, and it supports bitmap fonts. http://pixijs.io/examples/#/demos/text-demo.js A star explosion... But that could be better. I'd break the text up into little shards to create an effect kind of like this.

I'm not 100% sure, but you mentioned a shooting star with lines between the stars, so I think your lines should be following each of the images? Some of the lines in your demo are drawn backwards so I just made a simple version with 5 circles and lines. Is this the type of effect you're after here? Hopefully that helps. Happy tweening.

Remember this? All your images start off scaled from a different origin, so your transform origin is throwing everything off.

Hi @francis789 I'd recommend width/height instead of scale for those images. I don't understand what the lines should be doing. Should they be drawing on with drawSVG? I see your pen loads the drawSVG plugin, but there are no tweens that use it so I wasn't sure. You'll also see that I condensed your code down to two tweens. Rather than a separate tween for each ID, you can target all the lines and all the images at the same time. It's much easier to manage. Hopefully that helps. Happy tweening.

Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.

The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.

Hi Gilbert and welcome to the GreenSock forums. First try to avoid string refs, they are deprecated since React 15.x. Use the ref callback instead: https://reactjs.org/docs/refs-and-the-dom.html In the constructor create an empty array to add the elements as you call the render title method: // this is inside the component's class constructor(){ super(); // just an empty array, we'll use the ref callback to add the DOM elements this.titles = []; // the rest of your constructor code here } Then, IMHO I don't see the need for two methods to render each title, you can run all your logic in just one and use the ref callback to add the element to the array, like that you'll have a predictable way to add your elements to the timeline. renderTitle(e) { const ATitle = titles[e.component]; return( <div className="box" key={e.component} ref={e => this.titles.push(e)} > <ATitle size={e.size} text1={e.title} text2={e.subTitle} open="false" style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> </div> ) } The key is the ref callback which has the DOM node as the argument, then the DOM node is added to the titles array. Then you can access the titles array and create your timeline: componentDidMount(){ const { tl, titles } = this; titles.forEach( (e,i) => { tl.to( this.refs[e.component], 1, {x: e.size, y: e.size/3 , scale: 0.5, opacity: 0.5}, .5 * i ); }); tl.reverse(); } This is a better and more actual approach to write your app. Now to the sequencing part of your app. I'm a bit puzzled, because react-titles does creates either a GSAP instance or uses react-motion for the animations. If you want to control those animations, you'll have to fork the repo and create an API that exposes some way to do what you need, because react-titles starts as soon as the component is mounted. For the initial position, what I saw in the repo is that the code uses fromTo instances, which create an immediate render, which sets the initial position of the elements being animated, so no matter what you do react-title will enforce those initial values passed in the props of the component's instance. Such is the nature of re-usable React components, you have to work with whatever the creator of the component is giving you. Also keep in mind that the open prop passed to the component is a boolean and you're passing a string "false". Try using a boolean instead: <ATitle size={e.size} text1={e.title} text2={e.subTitle} open={false} style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> Another option is hack into the code of react-titles and create a way to control the animations. Honestly if I was you, I'd take the animations being created by react-titles and bake my own solution for the particular needs of the project. The GSAP code in react-titles is good and there are no issues there and unfortunately we can't spend a lot of time figuring out how GSAP based tools work and how they're used. I saw that you started an issue in the repo, hopefully the creator(s) of the tool can help you more than I can and they can add a way to keep the tweens paused when mounting and give more control over them, as well as creating more complex sequences. Happy Tweening!!!

In these cases it really helps if you provide a demo. If your starting and ending gradients are formatted the same way with the same number of stops you can do something like this: http://codepen.io/GreenSock/pen/56dc377001d36c64c154cc3a120098cb?editors=1111