Sahil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Sahil
-
Need guidance on how to make this animation! example on jsfiddle
Sahil replied to greenscript's topic in GSAP
Following example uses modifiers plugin, which lets you read values in the middle of animation and modify those values. You will have to change your approach and restructure your HTML. You can use 3 rows without needing to modify javascript. You will have to reduce the number of elements or make wrapper long enough that elements don't overlap. NOTE: you will have to update the logic that positions elements but that should be easy. You can read more about ModifiersPlugin Here is another thread by @OSUblake that explains wrapping function which wraps the elements on overflow. -
Actually I have wondered that if there are people who dislike/hate GSAP or have any issues with the way GSAP works. I have occasionally googled things like 'GreenSock sucks', 'GreenSock is bad' or whatever that might show up any article where someone writes anything bad about GreenSock, and I haven't really found anything. Also if there are issues for certain special cases/browsers, you will find many threads where Jack or Carl provide a quick solution to such problems. Finally, I wasn't sure if I should mention Chris Heilmann. You will find countless articles of him pointing out how something is not done right etc. Couple of years ago, he wrote one article related to GreenSock and he doesn't really talk about any negatives, and if there was anything negative he wouldn't have missed the opportunity.
-
Following is the one way you can do it. @Carl The first pen by Blake, it is still incomplete. He had created to answer my question but it behaves odd on resize and I wasn't able to fix it either. Just letting you know.
- 10 replies
-
- 2
-
-
- draggable
- timelimemax
- (and 1 more)
-
You can use this.getDirection(); to determine direction.
-
You had missing parentheses on line 35. hoverTwoTL.reversed() ? hoverTwoTL.play() : hoverTwoTL.reverse();
-
onCompleteAll is different than onComplete callback. Following is syntax for it.
- 2 replies
-
- 7
-
-
-
- animation
- staggerfromto
- (and 1 more)
-
You are still doing same thing, you shouldn't add tweens to timeline on click events. Just define entire timelines separately and just play them on click.
-
Ya you don't need to do anything, just move those timelines out of click functions and everything will be fine. Right now every time you click, new tweens are getting added to timeline. Just follow my demo and instead of 1 timeline use 2 and nothing more, it will workout perfect. And ya GreenSock will automatically take control of any property new tween is animating, so as long as your both timelines are animating identical properties(which is obvious), you won't have same issues.
-
I am not sure if that is right way to do it, your timeline gets modified every time you open and close. And if spammed with clicks, your animation goes on for few repetitions. Here is quick and ugly demo, see if it helps. This way you don't have to split text every single time. Here is a introductory tutorial about timelines in case you haven't seen it. Red box is to toggle it, you can also see that if you repeatedly open and close your animation starts behaving odd, this way you have control over entire thing and won't have to worry about same behavior.
-
Can you share that demo? I was trying to solve your problem yesterday before you deleted the question. In that demo, you were using same timeline throughout the pen which was main problem as pointed out by Jack. Well I will post a simple demo which should give you idea and you can further make into your desired effect.
-
Well you don't have to define it inside click event, you can just define it globally and call it on click. In fact, you can use same timeline for play and reverse if your desired effect is like that, but depends on how you want to do it. You can also split text just once, and define timeline on next line which will do the animation. After that you can simply reuse those timelines for open and close.
-
Ya you are using incorrect syntax. Cycle is part of regular properties. Here is introductory tutorial by GreenSock to get started quickly but going through docs will be good idea.
-
Oh just realized that it doesn't snap with mouse on second drag, I never tested second drag.
-
Here is something I came up with, so if you rotate back multiple times. It will snap back on very first rotation in clockwise direction. I don't know if it has functional value though, because any functional calculation on lastRotation will get messed up but I guess it can be fixed by keeping track of difference I guess?
-
Here is simple demo of what I am talking about. You can see that how the pen is responsive and I am using classes to animate those divs into place. But this is not the exact solution, it is just simple demo of how something can be done. It really depends on how you want to do it and boils down to your CSS skills. But this demo should give idea about how you should approach this whole page.
-
Ya now images show up and overall animation is better paced. But the icons are still misplaced, and if you resize screen they go out of their places. And not just icons but the text at the bottom shows up at different positions on different monitors. It shows up correctly on FULL HD but on HD it is messed up. I would still suggest you same as my previous comment, you should just position everything with normal CSS. Once you make sure everything is responsive, I mean the main content that animates into view. Then write javascript and just animate them into view using classes or using from tweens with clearProps.
-
Here is updated pen, you can see that GSAP tweens left and you can retrieve value using element.style.left. Like everybody else pointed out, you are most probably doing something wrong with original problem. This should resolve it.
-
@Svein-Tore these guys are right, I mislead this thread, sorry about that. Post a demo and you will get the answer.
-
@PointC Was about to try to do that in next reply but got messed up with unnecessary multiple timelines.
-
Ohk I didn't read it properly. It happens because you are animating from original position to this first position and then further. So timeline will repeat from the original position as well. I have updated my pen and instead of first animation I am setting value to start position.
-
Ya I was just writing further on that. Basically _gsTransform stores values of transformation. So basically you should stick to using x and y instead of using left or top. @Carl Can further explain why using left or top doesn't attach _gsTransform values. Ya from what I gather from this pen they are different but you will be better using x and y instead of top or left. It is basically doing same thing plus typing few letters less.
-
Well using x is same as left, it is just that key for left value in _gsTransform object is set to x. So if you want to access left value for element you can use x for it. Following is recent thread where you might get more insight on _gsTransform.
-
You need to set yoyo property to true. var box = document.querySelector('.box'); var timeline = new TimelineMax({repeat: -1, yoyo: true}); timeline.add(TweenMax.to(box, 1, {x: 50, y: 50})); timeline.add(TweenMax.to(box, 1, {x: 50, y: 100}));
