Leaderboard

Ya there is a lot of code that I am not even sure what is the purpose of that. You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate. You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event. Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.

To animate element across z-axis you need to set perspective on the parent. If you want to set x and y translate in percentage then you can instead use xPercent and yPercent. Go through this page to learn more about transforms and how GSAP can make things easy for you: https://greensock.com/docs/Plugins/CSSPlugin

@OSUblake is right on, of course. And if you simply want to remap a wider/narrower x/y range to another, here's an example of using a tween's progress accordingly: That's not really what I'd use for an eye-following thing because it's not actually measuring things with true angles from the center of a circle (so it goes off the edges at the diagonals), but I was trying to keep things as simple as possible to demonstrate the concept. You basically create a tween for the x-axis and another for the y-axis and that goes from left to right (or top to bottom) and then simply remap the ratios, like if you're basing it on the mouse position across the whole screen width/height (or whatever). Of course you could tween the progress of another tween too if you want things to animate/ease to the new position. If you need help with that, let me know. Happy tweening!

You need to set duration so class toggles back when you scroll further.

Tweens are based on time. What you're asking involves updating on every animation frame. https://greensock.com/forums/topic/15210-easing-to-y-position-set-on-mousemove/ https://greensock.com/forums/topic/17875-update-bezier-points-dynamically/?tab=comments#comment-81496

Click anywhere, and it will hide a couple images.

Yes that's what is happening but when you define a 'to' tween, GSAP will start from current value and animate it to the value you specified. If you had first timeline animating to 180 then keepFlying will just go from 180 to 360 and keep repeating just half circle. If you had first timeline to 360, nothing would happen in keep flying because the fly is already at the end position. That's why you need to use relative value, so now in your case first timeline goes to 25 and keep flying goes from 25 to 385 and keeps repeating. We have great resources on learning page that explain all these finer details, you will find it a lot useful in future: https://greensock.com/learning

That's the code. function clickHandler() { // change stuff ... // force update scroller.resizeRequest++; scroller.scrollRequest++; scroller.addItems(); scroller._update(); }

@Robert Wildling, Good article @Carl! Also, a tip, when animating symbols, or sprites, it is vary useful to use CSS Custom Properties, so that you can animate a specific instance of the symbol or sprite, rather than all of them at once.

That's because you are setting position to fixed and setting left, top which seems to create situation where IE does IE stuff and messes up transform origin. Any reason you are setting top, left? Doesn't seem like you have to. If you remove top left and remove xPercent, yPercent from javascript it will work fine.

In current implementation, Blake just loops through all the target elements that have data-depth attribute. And there is no logic in place to check if element is visible or hidden. You can add a property to 'item' that you can use to skip the element from the loop, but you will also have to adjust the the count of items to change the loop because you are skipping item and rest of calculation depends on the index. Kind of tricky situation as you will just have to rewrite most of the parts of it because Blake doesn't plan to provide support for it.

I wasn't thinking about an eye when I posted my response. Resizing the movement vector if it exceeds a certain radius is one way you could correctly handle diagonal cases.

I'm not really sure what you're trying to do, but trying to remove all the images but one without a jump doesn't seem possible without another container that is fixed. The image that you want to isolate, you could clone and append it the same screen location in the another fixed container.

I just re-read your question and if the circle expansion should transition the text from solid to gradient, a clip-path might be a bit easier here. For that you'd just use two versions of the text and animate the clip-path circle and regular circle together. Something like this. Happy tweening.

Yeah, I read the post at least 5 times and I'm lost. We'd love to help, but like @Rodrigo said, a demo would REALLY help. As for how easy something would be in GSAP, it'll pretty much handle any animation task you throw at it. Just keep in mind that it's an animation library - it's not an app framework or anything like that. Happy tweening!

Brilliant thank you

thanks again Sahil....appreciate the help

You can force it to reset. scroller.resizeRequest++; scroller.scrollRequest++; scroller.addItems(); scroller._update();

@PointC Thank you so much! Going to try and implement this now, really appreciate all the help here, still just learning this Greensock stuff so this has been very helpful.

Yep - no matter what method you choose to do this ( stopColor, offset, mask or clip-path), you'll need to have the gradient in your HTML with the SVG. Happy tweening.

Thanks everyone for your help, it's been really helpful. Coding in Animate is such a steep learning curve, but i do think using the code makes such a more refined animation than the timeline. To be honest, i could have done the button in 10 minutes on the timeline, but I wanted to push things a bit using GSAP! Thanks again

Ok, figured it out. It did need to be a fromTo. Here's a fork from the original:

You can modify following example by @OSUblake from another thread,

Great approach tweening the stop-color, @PointC! Welcome @shMattyP93! Another way to try would be to tween the offset attr:

Hi @shMattyP93 Welcome to the forum. This is an answer from another thread, but it should show you the basic technique of one way to do it.. You could also do it with a mask or clip-path. Happy tweening.

Hi there! My name is Sarah, I'm on the Vue core team and do a lot of work with Vue and SVG animation using GSAP. Yep, you're on the right track, refs are the way to target these elements though technically it still works to target an id or class as usual. However, there are some key pieces in here that I want to separate out in case it's helpful to you, because really the sky's the limit! And they play so well together: 1) The way that animation and rendering work, you are *always* going to be touching the DOM in the case of animation, this can't only happen in the virtual DOM (something that people miss about React, too, even when looking at libraries like React-Motion) 2) There's a way to interpolate numbers that then update the DOM by transitioning state, and then there is accessing the DOM directly. You can use Vue and GSAP for both. I rewrote the docs example to use GSAP for our transitioning state example here: https://vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers, but the way you're working with the DOM nodes and watchers, you may be more interested in this chart I wrote with where I'm spinning up SVG DOM nodes with directives, which is similar to what you're doing. In other words, you can use Vue and GSAP to interpolate number or values, and then apply that to a style binding, OR you can just update the fill in GSAP by targeting the element directly, that will still work. There is even a relative HSL tween that gsap offers if that's your jam 3) You might also want to set things up with a transition component, which offer some javascript hooks for beforeEnter, enter, and leaving states: (I have a bunch of pens that do this but this is probably the simplest Vue Book Content Typer) The nice thing that the transition component offers you is an ability to coordinate one thing entering and another leaving, with transition modes. They're pretty spectacular. You will also be given FLIP under the hood with the transition-group component. 4) You can also plug directly into the mounted lifecycle hook, as you can see here: Vue Weather Notifier Pen. This way you can activate an SVG animation on the component as soon as it's in the DOM. You can also see in this pen I'm changing opacity, using drawSVG, changing color, rotating, you name it- it's all possible on SVG elements and you don't *have* to put them in data. Though there's nothing wrong with transitioning state that way either. I also wrote this article that should help you: https://css-tricks.com/intro-to-vue-5-animations/ And have this open source repo which is a whole workshop just about vue and svg animations: https://github.com/sdras/animating-vue-workshop Please feel free to ask any questions as well. Thanks!

Hi dear community! I know you missed new releases with HERO banners. Today I present 3 of them! Please give us feedback if you like them. 1. World Of Tanks — Take Control Animation here 2. World Of Tanks — Video 360° Animation here 3. World Of Warships — Dunkirk Collaboration Animation here Thank you!

Banner for Bentley I use GSAP, animation look very smooth on every devices. Thnx everyone who created this cool libs)

A brand new banner to catch your attention! This banner uses a "classic" shooting mechanics but still has a fresh look because of the train as an obstacle. In terms of design we tried to use the industrial style and I hope you like it. Enjoy!

Hello colleagues! We are very proud to present our first 3D banner and we decided to share a little bit more info about it. Everything started with RnD. We were looking for the technologies that meet the requirements of our ad networks. We found out that WebGL could be used in the banner. The hardest thing was to pack everything (model & textures, animations, banner graphics) into 150 kb. It took us really long time (approx 1 month of experiments and fails). This was a perfect collaboration of our inhouse teams. Enjoy!

Have you seen Chris Gannon's SVG2GIF? https://github.com/chrisgannon/SVG2GIF

I'm so sorry to hear about your disappointment, bigo104. You absolutely can get a refund - in fact, I just issued a full refund on your account. It looks like you joined yesterday and within 12 hours, you complained about us providing no support and called us liars but I didn't see any questions that you posted anywhere. Did we miss something? We're happy to answer any questions you have. And the membership isn't purchased for support - you may have noticed that we do our best to provide support to EVERYONE in the forums, not just people who signed up for Club GreenSock. Most people use our tools and get their questions answered here and never pay us a penny. The club membership is for those who want the bonus plugins, and/or the commercial license, or for those who just want to support our ongoing efforts to innovate and maintain the tools. We do want to explore what it would take to provide even better integration hooks for tools like Browserify/Node/NPM but I hope we didn't give the impression that if someone joins Club GreenSock, we're guaranteed to implement whatever they ask for into the toolset. We have to really think things through in such a robust system because there are so many moving parts and sometimes implementing a feature may have unwanted consequences elsewhere, so it's not always a super simple thing to "just add package installs support". If you have a specific solution to offer, we're totally willing to look at it. We've also been working on quite a few other enhancements to GSAP since killroy originally posted here - feel free to check out the github repo release notes to see all the happenings. It's always a tough balancing act we have to do with listening to requests, figuring out which features are top priority to implement, keeping file size down and performance top-notch, providing learning resources, etc., etc. We're certainly not perfect, but we're trying hard. Again, I'm so sorry to hear that we disappointed you. We're passionate about having customers who are thrilled with the value they receive from GreenSock. If you're not in that camp, we gladly issue a refund and wish you luck elsewhere. Like I said, I already issued a refund back to your account. Let us know if there's anything else we can do to earn your trust back. Happy tweening!

Ah, I see what you did there. Thanks!

Hi kathryn.crawford Nope , for randomise tween pls try like this : var fFire=1 ; function flicker(){ if(!fFire)return false; TweenMax.to(obj,2,{ ..... ,onComplete:flicker}); }; flicker(); you can stop firing the function by setting fFire to 0 ; http://codepen.io/MAW/pen/MaMQry

switch this: TimelineMax.to("#flicker", 2, {opacity: 0, ease:RoughEase.ease.config({strength: 0.3, points: 8, randomize: false}), repeat: -1, yoyo: true }); to this: TweenMax.to("#flicker", 2, {opacity: 0, ease:RoughEase.ease.config({strength: 0.3, points: 8, randomize: false}), repeat: -1, yoyo: true }); and it works