Sahil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Sahil
-
This honestly feels like I am reading an email from client Can you please visit examples page on scrollmagic site? There are plenty of examples that show how different things can be done. Many times I just visit there and post my answers. I also had told you that you will need addIndicators plugin shows you indicator, without it it was just throwing errors in console. With scrollmagic's setTween method you can pass any tween or timeline to it, there is nothing more complex than that. So you can set up a TweenMax tween or timeline and it will animate it. Hope that helps?
- 10 replies
-
- 2
-
-
-
- tweenmax
- scrollmagic
- (and 1 more)
-
Yup it is due to number of elements, switching to canvas will greatly improve performance. Check following thread, Instead of looping you can use function that will return random values, but still what you are doing is too much for Firefox. I had to force close it multiple times and in the end edited using Chrome. https://codepen.io/anon/pen/RxPmNg?editors=0010
- 14 replies
-
- 6
-
-
- timelinemax
- performance
- (and 1 more)
-
That doesn't work either.
-
As Carl said, using addPause should resolve your issue. Looking at the demo you just updated, you are again in this extremely rare situation of multiple zero duration calls. I doubt GSAP was built for such usage. I am also not sure why are you trying to do this with gsap instead of using normal JavaScript calls as independent functions. Anyway, you can solve this by adding extremely small duration, which won't be noticeable. You can also check yesterday's thread that discusses this exact situation.
-
timelinemax Need help figuring out TimelineMax properties?
Sahil replied to AbhishekSock's topic in GSAP
That's the thing about from tweens, I have come across such scenario as well. When I first discovered GSAP I was super excited about using from tweens everywhere but, when you use from tween, the end position is calculated and the resulting values are set as inline style to the element. So to solve this you can use clearProps and pass any properties you want to clear once animation completes. Notice that I am using wild card 'all' which will remove all the inline styles so be careful when you choose to do so, you can also clear individual property by using comma separated string. As for second panel's width going all the way to zero, I am not sure if CSS grid is supported by GSAP. I never used css grid either, so @GreenSock or @Jonathan can explain what is going on here. -
In your example you are trying to use methods of variable 'tl' which is not defined anywhere. If you press F12 to open developer console, you can see the error. It will be great if you take my previous advice and take some steps to work on your basics of JavaScript. We always try to help anybody that posts question on this forum but it is going to be extremely difficult for us if we spend time answering all the basic JavaScript questions. It will just encourage other users to start posting similar questions. Not saying don't ask questions but we will save a lot of time if you work on the basics first. There are plenty of tutorials on YouTube and sites where you can learn things step by step. You will also save a lot of time and confusions in future if you go ahead and clear up your basics and practice how to debug any errors.
-
timelinemax Need help figuring out TimelineMax properties?
Sahil replied to AbhishekSock's topic in GSAP
I would first setup my layout using CSS only and make sure it is responsive. After that you can animate those blocks into their places using from tweens. Easier approach would be to use className to animate everything and keep it responsive. Another approach would be to use responsive tweens which will give you better performance. Following thread will give you some ideas about how to approach it. 1. You can use modifiers plugin if you are just animating 1 or 2 properties, otherwise it will get too complex. Though in those examples we are using tween.progress(), use tween.ratio instead which gives you ability to use easing effects. 2. You can use tween directly and track their progress on resize so you don't see any jumps. It is more useful when you are animating more than 2 properties, it will keep your code simple. Also note Blake's reply at the end which will keep your performance better. Following is another example by Blake that shows how you can use media queries in JavaScript. -
Ya everything is correct except the callback. You can use repeat: -1 as follows instead of explicitly restarting timeline using callback. Congrats on getting it right, if you keep playing with timelines using different examples you will master it soon.
-
Thanks Jack, it makes perfect sense now.
-
Ohk we will go in circle here but I read it few times and I still have same question so just forgive me for being curious. but then why does it not behave same when suppressEvents is true? I can guess that there might be some logic in place that causes whatever few milliseconds execution delay that causes the play to be called slightly before pause. Just guessing though, please confirm.
-
Thanks Carl, I kind of guessed from yesterday's question. But actually I am curious about why setting it to false plays the timeline? I mean what is even relationship of suppressEvents false here?
-
While trying to answer this thread I thought maybe suppressing events and callbacks will work but I came across this odd behavior. In example I am using seek with suppressEvents parameter, whether it is set to true or false, the pause function gets called. But if I set suppressEvents to false, the timeline doesn't stay paused while if it is set to true, the timeline stays paused. @GreenSock @Carl Can you explain what is going on in this example below?
-
I think correct approach would be to add pause by using onComplete events on each child timeline. That way you don't run into this weird issue. Everything else that you are doing seems fine to me. Though if you still want to be sure, post a demo so someone can take a look.
-
@Dipscom Make sure there is explosion at some point in this count down.
-
@OSUblake Weirdly demo you just posted throws error while running it on forum. On codepen it works.
-
BTW what are you doing by adding so many pauses in your example? It is confusing to be honest, what are you trying to do? EDIT: Ohk that's the exact problem here, timeline just seeks the label and pauses because you are adding pauses everywhere. Post a demo and let us know what are you trying to do so we can suggest correct approach.
-
Here is the demo, there are some comments that show different ways to seek, play, pause. Have you tried console logging whatToShow? Does it log? a label or something else? See if this helps, otherwise post a demo with your example.
-
GSAP part of your demo is correct, I don't see any issues. You are redefining 'target 'variable by using 'var' which is incorrect, it will still work in most browsers but it can throw error in some rare cases. You can reuse same variable without using 'var', though it is better practice to use unique variables for each element. Plus when you are using editor you will see squiggly lines telling you something is wrong in your code.
-
@OSUblake You mean in future of future right? I mean when all browsers start supporting CSS Typed OM and then in future some new feature comes, that can be supported by raw code, right? Last night I read your post it felt like it will be challenging to work with everything Houdini offers but after going through the code it looks pretty straight forward. EDIT: Probably missed my question?
-
I think you should leave first image as it was because it jumps when you scroll if you are using fromTo tween, here 'to' tween will be better I guess. Another big issue is, your images have absolute width which just makes it impossible for you to analyze what is going on.
-
I have changed tween on line 75. I am not sure in how many places you are updating transform x of that image, but this should take you in right direction. You have to debug everything and see what are current x, xPercent values, how everything is being affected. I have reversed the direction of scroll, as previous one seems so unnatural. Also you need to use addIndicator plugin for scrollMagic for indicators to show up.
-
After multiple tries I didn't notice any odd behavior in Chrome or Firefox. Following video explains how from tweens work, so it will explain some of the behavior.
-
In that case you will have to use tweens instead of timeline, timeline is going to wait for all child tweens to complete before repeating.
-
Can you post a demo? Nothing seems wrong with the code you have posted.
