en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en tr en en tr en en en en en en en en fr en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en sv fr de de fr fr fr en en en en en en en en en en en en de en en en en en en en en en en en en en en en en de en en en en fr en en en en en en en en en en en en en en en en sv en en en en en en en en en en en sv en en en en en en en en en fr ru en en en en en en fr en en en en fr en en en en en en en en en fr en en en en en en en en en en en sv en en en en fr en en en en en en de en en en en en en en fr en en en en en en en de en en en en en en de en en en en en en en fr en en en en en en en fr en en en en en en en en de en en en en en en en en en de en en en en en en en en en en en en en en en en fr en en en en en en de en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en de en en sv fr de de fr fr fr en en en en tr en es en it en fr en en en en en de en eu en it en pt en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
As advised, please post a reduced test case demo of what you are trying to do and elaborate your question more so we can understand better. Take a look at following thread to see how to create demo,
Block Reveal Effect with GreenSock
13 hours ago, somose138 said:
Would it possible for you to recreate this for a react component?
Ya of course, it just boils down to your knowledge and understanding of framework or library.
I am not familiar with react but I wanted to give it a try. I followed @Rodrigo's same blog post that I had advised you to follow in previous thread. Following is the fork of one of his demos. As you can see, it can be reduced to very little code, you can add more conditional logic to change colors etc.
Though there might be certain things that Rodrigo will do differently because this is very first time I am working with React but basically you need to start learning from resources we provide, almost everything is possible just depends on how you implement.
Stop animation with last loop
Problem: When you create any timeline, all the statements execute at the same time. So GSAP creates tween with target and duration, in your case duration is important but it gets calculated for all three tweens based on target element's current position. So when 3rd tween is created element is at position 0 and it goes distance of 50 pixels which is absolute value. But because it is a 'to' tween, the element goes from whatever the current position is to the target position and by the time 3rd tween plays, distance has changed but because it was created already, the duration for it was set to 0.5.
Solution: You need some way to calculate duration based on actual position, to get around that you need to use addPause method.
When you call addPause during a timeline, it will pause timeline at given position parameter.
I am passing the function that will get called when timeline pauses, parameters that we pass to move function and scope. I am passing current timeline as scope to keep things organized.
Inside the move function, you do same calculations as before but this function gets called while timeline is playing.
Because of that the tween gets created based on what is actual position of the element, so your calculation for duration is live and correct.
If you know all target positions then another solution would be to calculate your duration based on target value of previous tween instead of getting current position of the element. Because I think original question was for scenario where target position would change based on user interaction.
See the Pen eQdOxL?editors=0010 by Sahil89 (@Sahil89) on CodePen
All three add statements execute at the same time and they calculate the duration based on current position of the element, so 3rd statement goes to 50 pixels in 0.5 seconds but by the time that tween executes distance has changed. Though what you are expecting is that it should calculate duration after first two tweens complete.
If you want to construct timelines like that, maybe you can use addPause method and move your logic inside it.
See the Pen KrMOQd?editors=0010 by Sahil89 (@Sahil89) on CodePen
How to add gradient effect on canvas circle's minor arc?
Posted November 10, 2018
Your gradient goes from top-left corner to bottom right, you need to position it based on your arc. Best way to see your gradient would be use rect and fill it with gradient so you can see which areas gradient is affecting. Here is fork but there are many other issues with your demo like blur is affecting gradient color, and top left part is not getting drawn(or your are drawing rect on top of that) so I am not sure what is going on.
Also, please keep your questions related to GSAP API only we don't provide support for general javascript related questions and it seems you are not even using GSAP.
See the Pen MzeZXj by Sahil89 (@Sahil89) on CodePen
Add & Remove classname
Posted November 6, 2018
You need to set duration so class toggles back when you scroll further.
See the Pen zMvxmb?editors=1010 by Sahil89 (@Sahil89) on CodePen
Animate from transform:translate(-50%,-50%) to z value, not working
Posted November 6, 2018
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.
Animate from transform:translate(-50%,-50%) to z value, not working
Posted November 6, 2018
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
See the Pen mQJgvR?editors=0010 by Sahil89 (@Sahil89) on CodePen
Easing depending on distance, not time
Posted November 6, 2018
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.
See the Pen KrpYay?editors=0010 by Sahil89 (@Sahil89) on CodePen
Posted November 6, 2018
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.
Posted November 6, 2018
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
Posted November 5, 2018
In keep flying you were using absolute value so wrapper would only animate from 25 to 360. You need to use relative value instead "+=360"
See the Pen Pxqqax?editors=0010 by Sahil89 (@Sahil89) on CodePen
'Pulsing' Button could this be done in a better way?
Posted November 5, 2018
I was overthinking I guess, here is similar effect using Bounce.
See the Pen GwgVmN?editors=0010 by Sahil89 (@Sahil89) on CodePen
'Pulsing' Button could this be done in a better way?
Posted November 5, 2018
You are using codepen only link, that won't work locally or on other sites. CustomBounce is part of club plugins https://greensock.com/club.
You can also edit and create custom ease using ease visualizer https://greensock.com/docs/Easing, you will save a lot of time using CustomBounce and other plugins that come with club membership.
Smoothing out progress on scroll
Posted November 5, 2018
Here is the fork,
See the Pen XyJQQr?editors=0010 by Sahil89 (@Sahil89) on CodePen
Smoothing out progress on scroll
Posted November 5, 2018
Ya you can ease the progress of target tween or timeline. Create a paused timeline and on scroll animate the proxy tween so you can use it's progress for animation.
Navigate Carousel/Slider by clicking on the slide number
Posted November 5, 2018
You can modify following example by @OSUblake from another thread,
See the Pen NwLQyV by osublake (@osublake) on CodePen
'Pulsing' Button could this be done in a better way?
Posted November 5, 2018
Easiest way to do achieve that would be using CustomBounce plugin.
See the Pen OaPqJe by Sahil89 (@Sahil89) on CodePen
Rotate images around a center in a tilted plane
Posted November 5, 2018
Animation along path will just rotate them in 2d, if that's what you want to do then you can just rotate element by offsetting transform origin.
But it seemed like you were going for 3D effect, which is why I specified 3rd link. You need perspective on parent element and transform origin on the elements. So when you animate rotationY, the elements will rotate in 3D.
To change the speed based on mouse, you can change the 'timeScale' of individual tween or timeline.
When I was starting with GSAP I experimented with something similar, it was just 3D cube. It is not really what you are trying to do but it should give you some idea.
There is also a blog post by Chris Gannon for somewhat similar effect and explains how to set up your divs.
Pendulum effect rotation Reverse
Posted November 4, 2018
There is slack group of animators, we didn't create it but there is GSAP channel. Some of us are also member of that channel but we are not really that active there and we don't intend to provide support there.
You can join using this link: https://damp-lake-50659.herokuapp.com/
Rotate images around a center in a tilted plane
Posted November 4, 2018
That's pretty advanced thing for beginner to do especially if you are not familiar with JavaScript or 3D transforms in CSS. I would encourage you to visit our learning page and start from there, https://greensock.com/learning
There is also youtube channel intended to introduce all the features of GSAP: https://www.youtube.com/user/GreenSockLearning
The more specific part you need for this particular project is understanding 3D transforms that you can learn at following page: https://greensock.com/docs/Plugins/CSSPlugin
Pendulum effect rotation Reverse
Posted November 4, 2018
The only reason why i am still not have tweenMax is that greensock does not yet take paypal for transactions.
I am not sure because when I had purchased license I was in real hurry but I feel like there was option to pay using PayPal. @GreenSock can you confirm?
Also, I think you can start developing using TweenMax and purchase the license before you publish your game.
Pendulum effect rotation Reverse
Posted November 4, 2018
First part is to go away from center, after that you can swing from end to end. It gets really simple if you use TweenMax instead of TweenLite. With TweenMax you can set repeat to -1 which will keep repeating it to infinitely. And then set the yoyoEase to true so easing effect will be same while reversing. If you just want to use TweenLite, then you will need to call a function onComplete callback after first part. Then inside function define a tween that goes to end, and onComplete call itself.
See the Pen QJwwaV?editors=0010 by Sahil89 (@Sahil89) on CodePen
If you just want to use TweenLite then you will need to call a function after first part completes, pass 1 as parameter to it. After that inside function you need to define tween that swings end to end, now pass negative of the parameter so on next call pendulum will swing away. You also need to pass the scope, to define what is 'this' inside function.
But to be honest you are just making your life hard by not using TweenMax, as you will not notice any significant performance hit when using TweenMax.
See the Pen MzYYVR?editors=0010 by Sahil89 (@Sahil89) on CodePen
How do i get my svg's to fill in the window height like images do with this codepen animation?
Posted November 4, 2018
It seems SVG doesn't support offsetHeight. So you can instead using getBoundingClientRect to get height.
See the Pen BGaXmY?editors=0010 by Sahil89 (@Sahil89) on CodePen
Page 3 of 39
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“Sincerely, the people behind GSAP are sorcerers”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.