Sahil
-
Posts
1,002 -
Joined
-
Last visited
-
Days Won
71
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by Sahil
-
Follow this two part tutorial by Carl, you will be able to create complex animations by combining multiple timelines and be able to control entire animation by controlling master timeline. https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs
-
So I have "fixed" it. I referenced post by @PointC in other thread, and kind of just copied certain parts without any knowledge of this IntersectionObserver. But you had multiple issues with the way you were mapping array or even selecting targets. I would suggest to recreate his pen few times by writing each line rather than copy paste to get used to it. (Not being judgemental or anything, I don't know your coding skill level so just suggesting.) As for any detailed answers wait for him or Blake to respond.
-
Ohk, it doesn't show that error on codepen. So neither of us saw it.
-
Not really sure what you are trying to fix, Jack has answered correctly. Maybe you need to update your demo and add more content to test it.
-
You can set the scale from CSS using transform property. img { transform: scale(0.5, 0.5); } Or you can define a fromTo tween and pass it to 'setTween()'.
-
@Noturnoo here is what you might be looking for.
-
No more, it is perfect. Another issue though, slideDelay and slideDuration are overlapping. If you set slideDelay and slideDuration same, slide pauses for brief moment only. It can be fixed easily but just letting you know. Thanks. Unfortunately I wasn't able to use it and I went with what I had done at the time. Still this is perfect starting point as there are always questions on sliders.
- 10 replies
-
- 1
-
-
- draggable
- timelimemax
- (and 1 more)
-
You can use modulus on current rotation by 360 and get absolute value. Based on that you can determine where arrow is pointing. You can play with snap a bit so arrow won't stay on edge.
-
I think you are trying to update timeline on restart, but I don't think that is possible. You will have to regenerate timeline with new values. Your code can further be reduced to fewer lines but I guess you get the idea.
- 1 reply
-
- 2
-
-
Need guidance on how to make this animation! example on jsfiddle
Sahil replied to greenscript's topic in GSAP
No, you can download it for free. It should be in the zip file that you downloaded. -
Never used snap.svg but that seems specific to SVG animations. So if you use GSAP, you can use same syntax for SVG and dom element animation. Plus 99.99% chances are whenever you work professionally, you will use GSAP.
-
Need guidance on how to make this animation! example on jsfiddle
Sahil replied to greenscript's topic in GSAP
I have updated the demo now you can make it work with the way you want. You will need to position those images as you need them for animation. After that they will animate and wrap by keeping same distance as long as you set number of elements and wrapper width correctly. -
Need guidance on how to make this animation! example on jsfiddle
Sahil replied to greenscript's topic in GSAP
Slightly incorrect answer, it needs some corrections. Let me update the demo. -
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.
