romain.gr Posted April 2, 2020 Share Posted April 2, 2020 Hi, Not sure what I'm missing here but the transformOrigin is not animating, it just goes from '100% 0' to '0 100%' without transition : var showVideo = gsap.timeline(); var $video = $('.rectangle'); showVideo .set($video, {transformOrigin: '100% 0', scale: .8}) .fromTo($video, 2, {rotationX: 0, rotationY: 0}, {rotationX: '5deg', rotationY: '5deg'}) .to($video, 2, {transformOrigin: '0 100%'}) //.fromTo($video, 2, {transformOrigin: '100% 0'}, {transformOrigin: '0 100%'}) //NOT WORKING either //.fromTo($video, 2, {transformOrigin: 'right top'}, {transformOrigin: 'left bottom'}) //NOT WORKING either .fromTo($video, 2, {scale: .8}, {scale: 1}) .fromTo($video, 2, {rotationX: '5deg', rotationY: '5deg'}, {rotationX: 0, rotationY: 0}, '-=2') Any idea? Thank you See the Pen vWARwRxavLyk by romaingranai (@romaingranai) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 2, 2020 Share Posted April 2, 2020 Hey romain. By default, GSAP sets new transformOrigins, not animates them, because that's what most people expect. To animate the transform origin, you can use a proxy object and update the values in an onComplete. Here's how I'd set it up: See the Pen MWwRVqX?editors=0010 by GreenSock (@GreenSock) on CodePen Some other improvements you could make: Put the duration inside of the vars parameter so that you can use GSAP's defaults. Use GSAP's defaults to save you some typing. Use GSAP's keyframes to save you some more typing. Don't put units on your rotations to save you even more typing. Drop jQuery because why not? 4 Link to comment Share on other sites More sharing options...
romain.gr Posted April 7, 2020 Author Share Posted April 7, 2020 Hi Zach, Thank you for your answer, I'm just wondering if it wouldn't be more simple to use .set() if you want to set the transform-origin (like on the first tween) and use .to() if you want to animate it? I know the answer is no, but it looks like you are adding an extra step to achieve that, if .set() is made to set and .to(), fromTo(), from() is made to animate. Cool little extra advices, about the duration, what if the whole animation is longer than 2 sec, in this case it works but in case of longer animation what's going to happen? or the duration (2) is set for each tween or for the whole timeline? Thank you Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 7, 2020 Share Posted April 7, 2020 1 hour ago, romain.gr said: I'm just wondering if it wouldn't be more simple to use .set() if you want to set the transform-origin (like on the first tween) and use .to() if you want to animate it? I know the answer is no, but it looks like you are adding an extra step to achieve that, if .set() is made to set and .to(), fromTo(), from() is made to animate. While I agree that using only .set() to set the transformOrigin is more simple, the current behavior is a convenience for developers since it's generally what people want. It'd make it less convenient for force people to write .set(elem, {transformOrigin: myOrigin}) every time instead of just including it in the tween. In other words, GSAP does it the way that it does to serve the 99% use case, not the 1%, even if the 1% way, strictly speaking, makes more sense 1 hour ago, romain.gr said: Cool little extra advices, about the duration, what if the whole animation is longer than 2 sec, in this case it works but in case of longer animation what's going to happen? or the duration (2) is set for each tween or for the whole timeline? Defaults are inherited by each tween, not set on the timeline itself. GSAP's default duration is actually 0.5s, so the following is a valid tween: tl.to(foo, {x: 100}) Changing the default duration for tl to 2 would just make that tween run 2 seconds instead of 0.5. However, defaults are easily overwritten by declaring the property: tl.to(foo, {duration: 1, x: 100}) // duration is 1, not 2 1 Link to comment Share on other sites More sharing options...
romain.gr Posted April 7, 2020 Author Share Posted April 7, 2020 Hi Zack, sounds logic Got the point for the duration, thank you again. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now