Leaderboard

Hi @Kalimeromax I don't think a master timeline is a good idea for what you're doing. All your timelines repeat, but with different durations, so they aren't synced with each other. And the infinite repeat creates another issue. When you reverse a timeline, it's going to play in reverse for however long it has been playing forward i.e. its .totalTime(). That's why some of your reverse animations take longer than 1 second to complete. See if this is more of what you were going for. On hover enter, I adjust the totalTime as if the animation where on its first iteration.

Sounds good. It's officially item 1,437 on my 'to-do' list so I may not get to it until the year 2029. Unless you're gonna let me use your Blaketrix headjack so I can learn it in a few seconds.

The signal is only visible at night, so it might be awhile before he actually sees it. Maybe you should fill that void. I hereby promote you to the role of Senior Daytime React Answering Manager, so you should start learning it. I think the basics are pretty easy to pickup, and being able to combine JavaScript with HTML/SVG is a joy. https://reactjs.org/ https://reactjs.org/tutorial/tutorial.html

There's no chaining. He's creating an animation for an element, and then storing that animation on the element to make accessing it easier later on. An element is an object, and you can add properties to an object after it's created. The name doesn't matter as long as you don't use a name that is already being used or is reserved. var box = document.querySelector(".box"); var Anim; box.mySuperAwesomeAnimation = TweenLite.to(box, 0.7, { yPercent: -100, paused: true }); // later on you can access that animation box.mySuperAwesomeAnimation.play(); // creating an alias to the animation Anim = box.mySuperAwesomeAnimation; // both of these will work. They are the same animation Anim.play(); box.mySuperAwesomeAnimation.play();

Make that 5. https://github.com/ste-vg/plant-drawer

My apologies. When I see React in the thread title I just assume the Rodrigo React Signal has been fired up and my services will not be necessary.

Hi @kbeats, and welcome to GSAP! To get two tweens on a timeline to happen at the same time, you would set the position parameter. And more info on that https://greensock.com/position-parameter Happy tweening!

Ya you can have multiple timelines starting simultaneously in parent timeline using position parameter. Take a look at following video,

If anything is confusing in that demo, it's probably not related to GSAP, but rather JavaScript itself. Understanding the basics of an object might be a good place to start. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics You use objects all the time. The tween is an object. So is the curly brackets inside the tween. var myAnimation = TweenLite.to(box, 1, { x: 100, y: 200 }); You don't have to write the object inline like that. This works. var config = { x: 100, y: 200 }; var myAnimation = TweenLite.to(box, 1, config); After an object is created, you can still add stuff to it. This will animate x, y, and rotation. var config = { x: 100, y: 200 }; config.rotation = 90; var myAnimation = TweenLite.to(box, 1, config); As I said in my previous post, an element is object, so you can add whatever you want to it. var box = document.querySelector(".box"); box.mySuperAwesomeAnimation = TweenLite.to(box, 1, { x: 100, y: 200 }); box.mySuperAwesomeAnimation.timeScale(0.5); box.twoPlusTwo = 2 + 2; console.log(box.twoPlusTwo); // 4

appendMultiple is indeed deprecated and replaced with add().

@OSUblake you're my superhero! You're provided exactly what I'm looking for. Not only does GSAP rocks, the community is totally awesome!

If it's a keyframe editor, I wouldn't worry about changing an animation in real-time. I would only (re)create the animations if there are changes when the user presses play. That way you only have to deal with manipulating data. Basically, you would do this reverse of this. Create an animation from some data structure.

You guys are the best. I'll do the easy fix for now (deadlines and such), but it's good that I experienced this, so I will definitely keep it in mind for the future!

Thanks for the demo. Yes, it's an overwrite situation as @GreenSock thought. Drop this code into the beginning of your JS and you'll see the difference. TweenLite.defaultOverwrite = "false"; It doesn't make any difference that this is a DrawSVG tween. The same thing can happen with any type of tween. When you create a fight and overwrite a tween you end up with a new starting point. I think you're trying to have the tail end of those strokes 'chase' the other end off screen? If so, you're basically trying to create two DrawSVG tweens on the stroke at the same time and that won't work. You'll probably have to rework this a bit or use a mask to erase them. Happy tweening. Edit: DOH! Jack already replied.

Yep, as I suspected, you've got overwrites/conflicts happening. If you add this to your code, you'll see it: TweenLite.onOverwrite = function() { console.log("OVERWRITE"); } Basically, you have overlapping tweens that are fighting for the same property value simultaneously. That's generally not a good thing and it means you should rework your animations to avoid it. But if you want to just skip overwriting across the board (easy "fix", but be careful), you could do: TweenLite.defaultOverwrite = false; Or set overwrite:false in any of the afflicted tweens if you want to control it per-tween. Does that help?

I'm not sure I understand the question and there is no demo included, but it sounds like you'd want to look at the refresh() method. http://scrollmagic.io/docs/ScrollMagic.Scene.html#refresh I think all of your questions since joining the GS forum have been about ScrollMagic and I've answered several for you, but ScrollMagic is not a GreenSock product. They do have a support area here: https://github.com/janpaepke/ScrollMagic/issues We're happy to help with GSAP related questions and problems. Including a demo will get you the best possible answers. Happy tweening.

Very cool! I had no idea lol. Thank you!

Whoa! That's going back! I'm not sure `appendMultiple` and `allTo` are supported any longer. I think you'd want to look at add() instead. (I could be wrong though)

Looks like a neat script, but it's $49 for unlimited commercial projects. SplitText can do all that (& more). IMHO, it seems like Club GreenSock would be a better bang for the buck since you'd get a bunch of bonus plugins in addition to SplitText. https://greensock.com/club https://greensock.com/SplitText If you haven't seen them yet, here are a couple threads showing a typing effect with SplitText. But as @Carl mentioned, you'll probably have better luck with their support channels. https://github.com/alexmacarthur/typeit/issues

@OSUblake Hey! Thank you so much! This is exactly what i wanted to do. I'm going to look into you're pen to understand what you did there. Thanks @Sahil for your help too.

Ahh yeah the parenthesis, sorry SVG is not my thing. Unlucky you @PointC didn't answer this question , but glad to hear you were able to solve it Happy Tweening!!!

Hi Gilbert, I'll assume that the clipPathId passed in the components props is the url you want to add, right? If that's the case you can use template literals a feature from ES2015: <g ref={(el) => { this.clipPathReveal = el; }} clipPath={`url#${this.props.clipPathId}`}> If this is not what you're after, please let us know how the specific clip url is being passed. Happy Tweening!!!

That's neat. I must confess - I was not familiar with the .onOverwrite property before now. I guess I have to get out of the TweenMax section of the docs and visit TweenLite once in a while.

Hilarious, @Sahil! @OSUblake, nice solution! I think it looks more realistic (in terms of the flow direction) if you make this change: //OLD: count += wave.speed; //NEW: count -= wave.speed; ?

GSAP can tween anything. Check out this post where @Carl shows how it was used for Falcon Heavy's side boosters.

As long as the digital billboards software can utilize JavaScript. I believe I've heard several people say they regularly use GSAP in digital billboards, though I'm not personally familiar with how they do it.

Sorry, I'm not familiar at all with typeit. Please try their support channels. We have to keep our support focused on the GSAP API. Thanks!

@Sahil Thanks for your advice! The article and your pen helped me a lot. I managed to reverse the animation on hover and to play it again on hover out. Which is great (you can see it in my first pen)! But when i tried to nest my 4 Timelines with ".add" in one master Timeline my 4 Timelines played successively. I need to play all of them parallel. Is there a way to nest all my Timelines in one master Timeline and play them parallel? Thanks in advance Max

Thanks! I thought something looked a little out of sync, but I couldn't put my finger on it.

Yeah, like @PointC I don't notice anything obvious that's "wrong", but I wonder if you've got some overwriting/conflicting tweens somewhere. A quick way to test is to add: TweenLite.onOverwrite = function() { console.log("OVERWRITE!!"); }; A codepen demo would be SUPER helpful. No need to post your whole project - just a reduced test case with generic content (honors the NDA).

Note: TimelineMax allows you to set a repeatDelay value too, in case that's helpful. new TimelineMax({repeat:-1, repeatDelay:3}); And if you must use TimelineLite, keep in mind that restart() accepts a parameter that'll honor any delay as well, so you could do: var tl = new TimelineLite({delay:3, onComplete:function() { tl.restart(true); }}); //and if you want the first iteration to start immediately, you could just do: tl.play(0); Happy tweening!

Tip of the day. Changing the background position triggers a paint. x and y don't.

Hello @frankallen and welcome to the GreenSock Forums! Are you seeing this in iOS Chrome or iOS Safari? Without an example like @Shaun Gorneau advised, it will be impossible to narrow down what is happening on a live site. It is hard to debug a live site without isolating just your GSAP code. Please create a reduced codepen demo example so we can test your code in a live editable environment to better help you. Thanks

??? I was not expecting that!

You can change the speed by changing timeScale on reverse. But to do that your timeline should be constructed as single parent timeline, that can contain other timelines. Take a look at following article on how you can write better animation using functions, you are already doing it just need minor tweaks. https://css-tricks.com/writing-smarter-animation-code/

Oh my turn! my turn!! PS: Sorry couldn't resist

Reminds me of something I did several years ago, although I didn't use Beziers for the stems because I was going for a rougher look. If you're interested, here's a tutorial showing how to grow vines around a lattice. The site has been redesigned since I last saw it, and some of the demos appear to missing. Such a shame because the last demo was really cool. https://www.maissan.net/articles/simulating-vines

No. Graphics data is stored as an array of points. It does not keep track of the parameters you pass in. You can create an object with the properties of your shape, and animate that instead. The reason I'm animating the angle to 361 is because there will be a tiny gap at 360. It's either that, or draw a circle at the end. Also, graphics rendering can be slow, so it's best not to create a different graphics object for every shape you draw. If you look at the Pixi example, notice how they are using a single graphics object. https://pixijs.io/examples/#/demos/graphics-demo.js

Yup, Sahil is exactly right. In case you need more help understanding immediateRender check out this video Also, a little tip for using CodePen. You shouldn't have to change a log() or any code to get your demo to run. You can enable a "run" button via the pen's settings as shown here: Your pen with "run" button enabled Hope that helps

Not a bug. You have two fromTo tweens which have immediateRender set to true by default. So when second fromTo executes, it immediately renders your path to that value. You can either set immediateRender to false or use a 'to tween'.

If you're going the SVG route, then you can move a lot of code into SVG markup. You can also use software like Adobe Illustrator or Inkscape to generate SVGs. JavaScript doesn't have movie clips and a lot of other stuff like AS3 does. Well, some canvas libraries do, but if you want something similar to a movie clip with SVG, you'll probably need to code up your own version. Maybe something like this. You can set the visibility of the path, and start and stop the animation.

Hi @jimmymik Yes - you can have tweens fire within a pinned element via an offset. Here's an example that approximates the site you mentioned. I've used two different types of timelines. The sliding panels in the pinned section are based on user scroll. The small divs standing in for images in the lower right will play based on the actual duration of the tween. Does that make sense? Happy tweening.

Very interesting approach i think i will need to get onto using Animate CC so i can get some help from the Design Studio at work. Right now i can't keep up with the workload and i am the only HTML5 developer.

Hi @wijesijp Welcome to the forum. You're targeting the container: cardImg = new PIXI.Container(); TweenMax.to(cardImg, 1, { pixi: { x: 500, lineWidth: 5, fillColor: 0x0088f7 } }); If you want to animate the fill, you'll need to target the graphic. TweenMax.to(graphics, 1, { x: 500, pixi:{fillColor: 0x0088f7} }); I thought the lineWidth would work in that same tween too, but it doesn't want to cooperate. I had to target the lineWidth in the graphicsData object to make it animate. Most of my Pixi work is with sprites and I barely touch the graphics so I'm honestly not sure why we can't target the lineWidth without going into that object. @OSUblake is our resident Pixi expert so I'm sure he can answer that for us when he has time. Here's a fork of your pen. Hopefully that helps. Happy tweening.

You should also check out some of these examples created by Chrysto Demo 1: http://codepen.io/bassta/pen/kDvmC Demo 2: http://codepen.io/bassta/pen/eIyrd Demo 3: http://codepen.io/bassta/pen/cJgkw

Hi guys Learning , OneManLaptop , pls check this out , this can help you to start coding : http://codepen.io/MAW/pen/dopxrV