Leaderboard

Do you mean something like this? When you repeat animation, same animation is repeated on same elements. So to achieve that you will have to do more than a simple tween. You can read about modifiers plugin in docs. And how are you creating your demos? your current demo uses TweenMax 1.18.0 while current version is 1.20.3.

"use strict"; /** Hi Blake, thank you! Amazing as allways!// var getSolution = function() { return (Scope.GreenSockPope || Scope)[name]; }; if (typeof(question) !== "undefined" && question.exports) { require("../osu.js"); question.exports = getSolution(); } else if (typeof(question) === "crasy" && iDont.no) { define(["pause", "rememberOldStuff"], getSolution); } // and have fun

Another tip, when animating numbers, set tabular numbers in your CSS to prevent jumping. Notice how the bottom number doesn't jump when animating.

Scope is what "this" refers to inside the function. Your animation will complete at the same time for all the boxes, so index is pointless. You can lookup the target on the tween. By default, the scope of a callback will be the tween, so the target will be this.target.

Hehe. And now you know why I hate SVG arc paths. Try this. Set the start and end to 360, and tween the end to 0. Instead of messing with the internals of the getPath function, swap the start and end parameters around in updatePath function. var arc = { start: 360, end: 360, cx: 250, cy: 250, r: 150 }; TweenMax.to(arc, 3, { end: 0, ease: Linear.easeNone, onUpdate: updatePath }); function updatePath() { // clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.start, arc.end)); clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.end, arc.start)); }

You had undefined variables in your demo that is why it wasn't working. You should look into how to debug JavaScript. Again the videos I had suggested, they walk you through all the basic details about how you can chain animations and last two videos show advanced approach of using functions for complex animations.

Here's a demo I made. It does pretty much the same thing the demo you provided does, but uses GSAP to control the animation.

Hehe. That's much more complicated. The BezierPlugin handles speed difference with the timeResolution parameter (default is 6). But if you use multiple paths, the speed is probably going to jump. I think for that to work, you would need to convert the beziers into line segments, and that requires a little work. Here's an old demo that shows 2 different ways to do that. Definitely not the easiest thing to understand or implement.

Hi guys, I've fixed the problem. I'm a beginner in GSAP. GSAP is awesome and I have to try how it works. Our team wants to buy Business Green plan. Thanks a lot!

Based on your demo it works, I mean setting autoAlpha to zero though not sure why you want to do that. Post a demo of what you are doing otherwise it will be hard to guess.

@Kingsley88 .. Then just separate your code to just the GSAP parts that are causing your issues. It just needs to be a reduced codepen example with a couple of tweens showing your issue. Chances are there is something in there that is the culprit, but we just need to see the GSAP parts so we can recreate this to solve your issue

If you need the specific index and target for whatever reason, you can do a staggered tween.

@Kingsley88 .. We still need to see your code for context! There is no way we can know anything that is happening in your code that we can't see or can't test in a live editable environment. This is my 2nd attempt on asking for a code example. So please create a codepen demo example if you would like us to help you and offer proper solutions. Otherwise we will be shooting blanks!

You can use 'onCompleteParams' to pass parameters.

Hello @Kingsley88 and Welcome to the GreenSock Forum! Yes like @OSUblake advised. This happens in Firefox with the following: having an SVG child element that uses display none trying to animate elements inside a SVG <defs> or <symbol> element You must use either the CSS visibility property or the SVG visibility attribute. In SVG any graphical element that is display none or inside a <defs> or <symbol> element will not directly be rendered and will be removed from the render tree. https://greensock.com/forums/topic/13681-svg-gotchas/?do=findComment&comment=57408 Happy tweening!

I was just about to bring that up. The ratio value of the tween is what you should use. Every ease has a getRatio method, which is where that value comes from. Kind of like this. var ratio = Sine.easeInOut.getRatio(tween.progress()) So the modifier functions should use that value instead of progress. var tween = TweenMax.to('.slide', 3, { x: vw(50), y: vh(50), ease: Sine.easeInOut, modifiers:{ x: function(x){ return tween.ratio * vw(50); }, y: function(y){ return tween.ratio * vh(50); } } })

@Nico You can do that by using modifiers plugin. Recent similar threads, UPDATE: @jmca @melissa Use 'tween.ratio' instead of 'tween.progress()' so you can use easing effects.

Showing how that might look. There is a way to read the point values directly from a polyline element, but I just manually included them. Note that a circle is already centered by default, so I'm not using the -50 xPercent/yPercent here.

In case you missed it, here's another post that shows how to create waves.

You need to set controller property 'vertical' to false.

Nice, Thanks Blake Setting visibility with elements that are not in view is a really good idea. Doing parallax images in only half of my battle. IE still doesn't like that method either, think am going to have to use the progressive enchantment spell. (∩｀-´)⊃━☆ﾟ.*･｡ﾟ

Can you post a demo? Nothing seems wrong with the code you have posted.

If you want to scroll horizontally on mouse scroll, If you want to trigger navigation, Also, when you fork old pens, make sure to check all files and versions, right now it is using really old versions TweenMax and scrollTo plugin.

@Kingsley88, If you are not using <defs> or <symbol> elements or you are not using display none, then you need to provide a limited codepen showing your issue. Since there is no way we can debug or know whats going on without seeing your code in context. Please create a codepen if you would like us to help you with your issue: Thanks

Yep. That's what happens in Firefox when something can't be rendered. Make sure the loading is complete before setting up any animation stuff.

There's a 100% chance that you're setting display to none on something, or messing with something that can't be rendered, like an element inside <defs>.

Haha I see what you did there.

Hi @Tim Rijkse Are you forking the GSAP repo from GitHub? Make sure the package name is gsap, and it might be a good idea to clear your cache so it doesn't try to install the hosted version of gsap. Not 100% sure, but the problem might be the paths. Does the bottom of the Draggable.js file look like? //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); require("../plugins/CSSPlugin.js"); module.exports = getGlobal(); } else if (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite", "CSSPlugin"], getGlobal); } }("Draggable")); Or more like this? //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(module) !== "undefined" && module.exports) { //node require("gsap/TweenLite.js"); require("gsap/CSSPlugin.js"); module.exports = getGlobal(); } else if (typeof(define) === "function" && define.amd) { //AMD define(["gsap/TweenLite", "gsap/CSSPlugin"], getGlobal); } }("Draggable")); Notice how the paths are different. I'm wondering if that's the issue.

you can also create a small function to get viewport units like this (ES6): const vw = (coef) => window.innerWidth * (coef/100) const vh = (coef) => window.innerHeight * (coef/100) Then use it like this: TweenMax.to('.el', .25, { x: vw(10), y: vh(10) }) Beware that the value is calculated when the code is evaluated. So if you set a Timeline at page load, then resize your window, and finnaly play the Timeline, you may have incorrect values. Btw, tried this too, but it's still evaluated when the Timeline is set, not when the actual animation is triggered: TweenMax.to('.el', .25, { x() { return vw(10) }, y() { return vh(10) } }) If someone knows how to handle this... My guess is that it's not possible for performance reasons.

Yeah, there's no easy solution for a clip path like. Well, it's pretty easy to do with canvas, but most people aren't willing to try it. For SVG, you have to recalculate the arc paths on every change, which can be really hard to understand. I understand how they work, but still get confused by all the different parameters. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs Here's a somewhat related demo that explains how the arc paths are calculated in the comments.

Quick follow up. Just make sure that you use an ExpoScaleEase on both the parent and child element.

Turns out that animating scale is actually pretty deceiving. You can read about that and how we ended with that ease function here. The original problem was how to make an infinite zooming animation. Using a regular ease causes the scaling to slow down. Don't worry too much about what's going on inside the ExpoScaleEase function. The goal is to possibly add that as an ease to the GSAP library, so just treat it like that for now. For now, all you need to know is how to call it. The first parameter is the starting scale, and the second parameter is the end scale. TweenLite.fromTo(element, { scale: 2 }, { scale: 1, ease: ExpoScaleEase(2, 1) }); That will actually make it look linear, so I added an optional third parameter to pass in a GSAP ease to follow. // Now it will look like it's scaling with a Power3.easeOut ease TweenLite.fromTo(element, { scale: 2 }, { scale: 1, ease: ExpoScaleEase(2, 1, Power3.easeOut) }); As to why it's better, you no longer have to do this. It's kind of built into the ease. function updateScale(){ TweenLite.set(test._mask._inner, {scale : 1/test._mask._gsTransform.scaleX}); } And creating a new tween 60 times per second can degrade performance. When the browser's garbage collector kicks in, it has to find all those unused objects and delete them, which can result in dropped frames.

@GreenSock can you explain how timeResolution works? That is something I've always wondered, but keep forgetting to ask. After thinking about your question, I remembered that SVG path elements have a getTotalLength() method. This seems to work.

Not sure why the polyfill doesn't work. I didn't test it out, but it says it's compatible with IE7+. Keep in mind that the script I wrote is very simple, and hasn't been battle tested, so use at your own risk. If I were to make it into a scrolling library, there's a lot more stuff I would want to add to it. Unfortunately, I currently don't have a lot of free time to devote to making a full-blown scrolling library like ScrollMagic. Well, unless somebody paid me to do it. I can always make time for that.

To use PixiJS with Animate CC, you would need to use the Pixi Animate runtime. It's written by one the main PixiJS devs. https://exchange.adobe.com/addons/products/14345#.Wi8GHiNX2Ul https://github.com/jiborobot/pixi-animate The problem with blurring on a regular canvas is that it's slow. Blurring with PixiJS is fast because it uses WebGL. However, in the future you will be able to use CSS and SVG filters directly inside a canvas context, which should run pretty fast. At the moment, it seems support is limited to Chrome and Firefox. You can see a CSS blur filter at work here. Turn off the contrast filter in the settings panel to isolate it.

Hi @OSUblake, is it possible to calculate distance for equal speed for curvy lines? Kind regards Mikel

That's what loops are for. If you need help setting that up, just let me know.

Hi @mrtips To center something on a path, you can do this. TweenLite.set(someElement, { xPercent: -50, yPercent: -50 }); No. It's not that simple. There is no guarantee that the path will go through a point, like with a bezier, and a path can go through the same point more than once. If all you're doing is simple lines, you could do something like this. var tl = new TimelineMax({ paused: true }) .to(ball, 1, { x: 100, y: 400, ease: Linear.easeNone, onComplete: someCallback }) .to(ball, 1, { x: 200, y: 300, ease: Linear.easeNone, onComplete: someCallback }) .to(ball, 1, { x: 300, y: 200, ease: Linear.easeNone, onComplete: someCallback }) .to(ball, 1, { x: 400, y: 100, ease: Linear.easeNone, onComplete: someCallback }) TweenMax.to(tl, 1, { progress: 1, repeat: -1, ease: Power2.easeOut }); Note that the duration would need to be different for each tween though. You need to calculate the distance between each point, and divide that by some speed value, like how fast the ball should be moving in pixels/second.

About touch screens, you CANNOT detect one, so don't try. http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ I come across so many sites that break on my computer because I have touchscreens and assume I'm using one, when I'm really trying to use my mouse. Touch can be determined by the event type. Here's a good article on the subject. https://developers.google.com/web/fundamentals/design-and-ux/input/touch/

Map converts the value in one range to a value in another range. It normalizes the value, converts it to a value usually in the range of [0, 1], and then uses linear interpolation. For more info about how it works, check out the normalization, linear interpolation, and map videos posted here.

And a canvas version...

Using a loop, you can cut down on your code considerably var tl = new TimelineMax({repeat:-1}); $(".paths path").each(function(index, element){ var circle = $("#circle-" + (index + 1)); TweenMax.set(circle, {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); var bezData = MorphSVGPlugin.pathDataToBezier(element, {align:circle}).reverse(); tl.to(circle, 6, { bezier: { values:bezData, type:"cubic" }}, 0) }) Note: I wrapped all your <path> elements in a <g class="paths"> so that adding other paths in the future won't blow up the js code.

Hi and welcome to the GreenSock forums, Thanks for providing the demo. Unfortunately, we can't spend a lot of time analyzing the logic in 100+ lines of code, but what jumped out at me as a potential problem is that you are splitting text when you hit the next button AND the back button splitHeadOut = new SplitText(slideOutH1), splitHeadIn = new SplitText(slideInH1), If you split text in a slide when you hit next and then split it again when you hit previous you are going to end up with lots and lots of extra divs being created and get unexpected results. My recommendation would be to split all the text when your app loads and just focus on the animation when the next and previous buttons are clicked.

Yeah, I think Mikel's advice is best and the easiest to implement You can learn more about MorphSVG Plugin which is a bonus plugin for Club GreenSock members here: https://greensock.com/morphSVG Or if you are more technically inclined and want lots of dynamic control, this example from @OSUblake is great Check out the demos in Blake's post here for other scripted options:

I tried editing your pen, but it just seems too complex along with issues in css, html. I will post few links to video tutorial, that should cover most of the basics about how you can repeat animations etc and how to create complex animations with functions. I hope you will go through these tutorials, otherwise it just opens door for more questions. Also, try to post your questions with as simple example as possible with reduced codepen demo specific to the question. It makes it a lot easier to answer and will also help you understand quickly. https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=tMP1PCErrmE https://www.youtube.com/watch?v=QO1mLs96krY https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs

You had missing quotes and comma on line 9, I have changed timescale so you can see that animation stops after repeating twice. Didn't really understand your question about infinite repeating animation.

ya, got distracted in trying to explain.

When you use repeat on any tween, it will repeat same animation. Such cases can be handled using different approaches, but always depends on animation. You can use recursive function that will get called every time animation completes and instead of using absolute values, you can use '+=10' which will take whatever current value is and animate it with +10. I am using TweenMax.delayedCall() method instead of timeout or interval because in complex animations it gives you control over everything. Also, you can't have separate eases for from and to parameters. You seem to have wrong idea about easing, easing just defines how entire animation is going to calculate, so it basically eases animation itself nothing else.

Thanks! And you probably don't need to create 50 different animations or eases like I did. I used a RoughEase in that demo, but I totally forgot about CustomWiggle. You can create a similar effect using a random wiggle type.

Hello swampthang, Have you looked at the various overwrite properties available? http://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/ overwrite : String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property):"none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time. "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet. "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.