Sahil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Sahil
-
Coincidentally I came across this page today. In both Firefox and Firefox developer edition, FPS drops below 5 while using GSAP, in chrome it touches 60 FPS. Is it old test page or something has changed with Quantum? Or 2x speed of Firefox still not enough compared to Chrome?
-
You can morph it as well, it will work same.
-
Sure it is possible, if you are familiar with events and callbacks you can do it easily. If this chat bot you are mentioning has callback or raises event every time it replies, there you can write a gsap code for animation. For example, in following demo every time you click anywhere, it responds to an click event and animation changes.
-
Yes and no. You can't animate flexbox so you will have to do some extra work for it. There are some issues with your entire setup at the moment, for example you have nested '&.active' class under '.accordian-group.item' but from javascript you are adding active class to '.accordian-content'. Following is the thread where @OSUblake explains how you can animate flexbox by recording start and end positions. In current situation you will have to expand and shrink columns.
-
Get co-ordinates in relation to drop target with Draggable
Sahil replied to GuerillaRadio's topic in GSAP
There is no built in method to do it. Following is demo that shows how you can calculate coordinates inside target. Also, you can just perform hitTest onRelease callback rather than doing it on every drag, unless you need to do it for some other effect. -
That's because of transformOrigin, the lines that go down look fine but line going up has problem due to transformOrigin. Also can you please post your demos as normal codepen rather than copy/pasting everything in HTML? It becomes really time consuming to find every bit in single editor. It certainly makes it easy for you to copy/paste but anybody trying to help you has to take extra efforts every time.
-
Here is demo by @PointC in another thread that shows how to use mask to reveal svg. Not sure about masking html elements.
-
You can use killTweensOf instead and pass all the elements from game1 container, that will kill tweens on any element contained in it. TweenMax.killTweensOf('#container1 *'); or TweenMax.killChildTweensOf('#container'); Though you will have to kill all delayed calls to functions as well otherwise anything being called later will start animating. TweenMax.killDelayedCallsTo(myFunction);
-
Nothing really, you are doing great. Just if you don't know, you can pass tweens to ScrollMagic and it will play and reverse it for you. So if you are simply reusing same tween, you can use 'tween' method of ScrollMagic to pass tween.
- 13 replies
-
- 3
-
-
- timelines
- oncomplete
- (and 1 more)
-
It should work as long as you are not using same tween to animate all elements. You can loop through elements and create individual tween for each one. See if it helps otherwise I will take a look at it later.
-
I am bit confused, as you are saying certain part should reverse then play normally, won't that cause the jump in animation? You can just use tweenFromTo and pass labels in reverse order. BTW just because you are using nested timelines doesn't mean you should add everything to master. I mean if you want certain animation to reverse, you just call that part function and play it in reverse. Or create master2 timeline and call it separately. I hope that gives you some ideas. I can't really visualize what you are doing so if possible post a codepen demo that will be easier to answer.
- 13 replies
-
- 4
-
-
- timelines
- oncomplete
- (and 1 more)
-
can you post a reduced code pen demo with this specific problem? Following is demo that works fine on play and reverse. If you meant, they should stagger on reverse then you can create two separate master timelines for play and reverse. One with label another without label.
-
Here is one way you can use timeline's call method for non-GSAP stuff. Though I am not sure if it is alright to use timelines like this. @GreenSock @Carl Is it ok to pause timeline like this inside call method? Any other way to make timeline wait for call to return before it continues to next tween? Also, I tried using 'this' to self reference timeline to pause and play it didn't work. Console logging it made sense but wanted to know if there is another way to self reference timeline.
-
It depends a lot more on what you are doing. You can use onComplete callback to do something when tween ends. Then play tween when you are done with non-GSAP stuff. TweenMax.to(elem, 1, {onComplete: function(){ // do something }}) That is very basic answer to your question. 1. Assuming you are talking about music player and doing same animations again, you can tween something then onComplete call a function. Then repeat the process and use your custom logic on callback function. 2. If your animation isn't constant then you will have to regenerate tween/timeline to change your animation. 3. If it is more complex then you can use functions, and use GSAPs built in method for delayed callbacks etc, I love using it because it gives you a lot more control.
-
Ya you can rotate it however you want or the trick works on complex shape too. Read that article, it explains it better. It uses CSS but same can be done with GSAP. See my codepen.
-
Source So I found out how you can use dasharray and dashoffset. But I am not sure how it can be used instead of multiple lines. I guess you will have to calculate distance between each circle then animate the offset.
-
You mean at every point line arrives, you want the circle to reveal? You will have to use multiple lines I guess, and on revealing each line you can reveal circle.
-
What do you mean by slowly?
-
Actually I had struggled with this a lot when I new. And I think many people do too, especially those who come from jQuery background. Also I had tried to add and remove classes at the same time, and had seen few questions about it as well. Not saying you should support it because my way of looking at animations has changed a lot so I don't remember last time I had to tween multiple classes but docs should be updated with this clarification.
-
@Jonathan I thought it was never meant to handle multiple classes. If I remember correctly from around 2015, removing multiple classes were not supported. I only gave it a try thinking maybe it may have changed.
-
Have you tried tween.seek(0).pause() ? Just for future queries, you will get answers a lot quicker if you provide a demo with reduced code that shows your specific problem.
-
Sorry for the confusion, to animate left and top properties. You need to set position of that element using CSS. If you add following CSS, it will work .logo{ position: relative; }
-
Ya looks like you aren't using jQuery. You can instead use following equivalent in plain JavaScript document.addEventListener("DOMContentLoaded", function(event) { TweenMax.to(".logo", 2, {left:600}); });
-
As you are using jQuery, $(document).ready(function(){ TweenMax.to(".logo", 2, {left:600}); }); It runs when DOM is ready. Without it, code does execute but as there is no DOM to work with nothing animates.
-
Here is how you can remove multiple classes using jquery $(elem).removeClass('class1 class2');
