Search the Community
Showing results for tags 'multiple tweens'.
-
Hi All, I got stuck in gsap where Multiple tweens having different properties tweening at the same time. I can fix if the duration is hardcoded but if there is dynamic duration value what I am passing through variable in real app then it does not follow the timeline smoothly. I also tried positioning but in dynamic case, positioning was also not working. Therefore, I need help. I also have added codepen where I have given some hint about what I am trying to do. In the codepen, I am trying to animate rows on one side and image on other side should animate at the same time. image is fading away and row's background and color is changing depending on image but timelinemax has sequence whereas tweenmax is running at the same time. timelinemax waits untill one tween ends but i want one group of animations to start and end at the same time then move to another. So could someone please explain how can I achieve it. Thanks in advance! In Short: Multiple tweens with different properties animation at same time. one group of animations start and end at the same time.
- 4 replies
-
- multiple timelines
- dynamic
-
(and 1 more)
Tagged with:
-
staging.mkeballet.org Hello GSAP crew. I've got a site here that does full page xPercent tweens(inspired by the answer to my previous question - thanks Blake), coupled with drawing an SVG path, and a few other things. On mouse wheel, a function called goNext() or goPrev() fires. Within those functions are the individual functions that kick off the parts of the cover transition - drawing the circle forward/backward, transforming the text in and out, and sliding the cover xPercent in and out. Everything is going great, on at least the user facing side, even on retina screens. Except when you make the screen larger than an average laptop. On larger screens, the cover images are of course larger. And when they "clip" in and out, the red circle path chugs as it draws. If you inspect the sources, you'll find the JS file in js/custom/mkeballet.js. I've minified the irrelevant sections, and tried to comment what the relevant hunks do. The goNext() function is where things come together for this example. So in summary, my question is do you see anything about the way I'm organizing/writing my GSAP code that is counter-intuitive, or am I just trying to do too much that jank is inevitable? I've been here https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=en But I'm not that good at memory monitoring yet so I haven't been able to discern anything useful yet. Thank you!
- 4 replies
-
- memory allocation
- performance
-
(and 4 more)
Tagged with:
-
Hi everyone, I am new to using GSAP, but have used (the timeline) in Flash heavily. I've read the documentation and tried to follow it. For my first project using GSAP, I built a small banner ad to test some of the functionalities. It can be seen here: http://codepen.io/anon/pen/bEBxBB As for now, I have some questions about my code: 1. (How) can I chain the .set into one large string (so that they are all set at once)? For example: TweenLite.set("#box", {x:52, y:57}).set("#shadow", {x:127, y:52, autoAlpha:0}); Is this even possible? 2. I would like to move the #box, #shadow, #pack and #line simultaneously to the left, but in the code provided the animations start when the one before is finished... How can I fix this? Is it possible to be chained as well? tl.to("#box", .5, {x:-25, y: 62, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#shadow", .5, {x:55, y: 58, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#pack", .5, {x:70, y: 76, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#line", .5, {x:-10, y: 170, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); 3. If you have any other remarks, tips, optimisations or observations about my code, don't hesitate to give me a heads up! Thanks in advance for all your (kind) help!
- 4 replies
-
- gsap
- multiple tweens
-
(and 2 more)
Tagged with:
-
Can I combine multiple tweens and run them with one ease function? Something like this: var el = $('#some-element'); var tw1 = new TweenMax.to(el, 1, {left: 100}); var tw2 = new TweenMax.to(el, 1, {left: 200}); var tw3 = new TweenMax.to(el, 1, {left: 300}); var tl = new TimelineMax({ease:Power2.easeOut}) .add(tw1) .add(tw2) .add(tw3); I've made sandbox examples for this issue: 1. http://codepen.io/panych/pen/qpjCK 2. http://codepen.io/panych/pen/aLHGy We need to make to move the box from the first example with one common easing function, as it has been shown in the second example, but without removing middle tweens.
- 5 replies
-
- ease
- ease function
-
(and 2 more)
Tagged with: