Search the Community
Showing results for tags 'StaggerFromTo'.
Found 9 results
-
Hello! I want to make cyclic animation I use TweenMax.staggerFromTo. For this purpose I want to restart function with animation. How to me to make it? onCompleteAll does not work. It is started constantly during animation, but not at the end. Forgive for my English.
-
My slider (see Codepen) has elements sliding in turn from left to right, with the previous slide fading out as the new one slides over. It works fine except when I pause it while the first slide is moving (the red box in the Codepen): if I then resume it the first slide immediately disappears. Resuming when the other boxes are moving works fine too. I guess one of the autoAlpha:0 properties is being applied in a way that I don't understand, but I would be grateful for any help with understanding why that's happening and how to fix.
-
I'm looking for any suggestions as to what might cause the bug I'm currently experiencing in TweenMax 1.19.1 -- I've run out of ideas. Here are the basics: I'm doing a TweenMax.staggerFromTo transformation that simply moves several elements from -20px and 0 opacity to 0px and 1 opacity. The classic "fade in from the left." The animation runs perfectly except that, with the most recent update to TweenMax, the opacity portion of the tween is being skipped altogether. The opacity of the elements is never modified and, even with clearProps not being used, opacity is not left in the Styles attribute after the transformation. The result is that the elements appear on the screen, then move 20 pixels to the right in sequence with no fade in. Some additional information: This bug appears in 1.19.1 only. I can switch back to TweenMax 1.19.0 and it won't appear, switch again to 1.19.1 and it will. So it's something that changed between this version and the last. I've tested in on Chrome and Firefox so it isn't just a single browser. While I've copied the basic situation in a Codepen, I cannot seem to reproduce the bug. There's a lot going on on this page, but no other modifications to this element take place before the Tween with the problem. I've tried adding every CSS attribute assigned to the real element to the Codepen element and I've reproduced the nested function/promise/function structure of the js, but I can't get the issue to appear. The attached pen does show the context, at least. If I set the debugger to break on attribute modification, in 1.19.0 it breaks first on the opacity part of CSSPlugin.js at line 2611. In 1.19.1 it breaks on the matrix portion of CSSPlugin.js at line 1722, skipping the opacity code entirely. If I try to modify only the opacity and not the position, it does nothing at all and no attributes are modified on that element. It's definitely only the opacity tween that's affected. Any thoughts on what has changed in 1.19.1 that could lead to opacity being skipped in a staggerFromTo under certain conditions? I'd prefer not to have to freeze Greensock updates on this project and stay with 1.19.0 for good, but I've spent more than a day on this and I still can't figure out what might be causing this deeply obscure problem.
-
I am trying animating a bunch of objects staggering one by one, but i want to do multiple things to do to a single element and i cant find a way. For example say, I have ten cubes, first of all i want the first cube to rotate 45 deg in X then it goes y = -400 then it comes back y=200 and then it rotates back 45deg and the same things happen to the following cubes after wards. So, essentially there are 4 steps i need to define. If i use staggerFrom it places me from one point to Original one, If i use staggerFromTo its again two way , and i cant chain them as the second will only start after the first staggerFrom finishes (i.e., all the ten cubes finish step 1). So tell me a way in code to do this. As I am pretty new doing these i can't really figure out a way to do this. But I know it is doable as i have seen all the crazy impossible stuff's done with gsap w/o a hiccup, and this is something simple that can be also done with css (but it will be too time consuming). So.. I am waiting for some cool animating and tips to be made.
-
I've seen several posts about onCompleteAll being placed at the end so it only runs when all tweens of a staggerFromTo have finished. So, here's where I placed it. Is this wrong? Because it never runs the pertyColors function. function drawIn() { var rbg = toRgb(colors); TL.staggerFromTo( selectorsArr, 0.3, { drawSVG: '0' }, { drawSVG: '0 100%', stroke: function(){ return rbg[Math.floor(Math.random() * rbg.length)]; }, visibility: 'visible' }, 0.3, pertyColors); // onCompleteAll => pertyColors (not running) } Could it have something to do with the stroke: function() breaking the callback? I've made sure I have the latest js files. (What I'm trying to do is draw in an SVG, then animate the colors and then draw it out after a period of time.)
-
Hi, I was wondering if cycle could handle properties like delay or the overshoot value of a Back ease for example. Or to put it the other way, what are the properties cycle can animate?
-
The two tweens below fade in a group of divs, but the problem is each fades in with more time between the last as it progresses (almost like it's exponentially slowing). And both tweens below fade in the first two divs at the exact same time with no stagger (hence "faking" it with the delay on the second). Any idea why? How can I get a group of divs with the same class to fade in, one by one, with the same uniform delay between the first two and the rest? Thanks in advance! /* this one doesn't work in a linear fashion */ TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+ " .hotSpot"), 1.5,{opacity:0},{opacity:1},2); /* this one doesn't work in a linear fashion */ var tl = new TimelineMax() tl.add(TweenLite.to($(".courthouse"), 1, {opacity:1})); tl.add(TweenLite.to($(".hospital"), 1, {opacity:1,delay:1})); tl.add(TweenLite.to($(".jail"), 1, {opacity:1})); tl.add(TweenLite.to($(".park"), 1, {opacity:1})); tl.add(TweenLite.to($(".cafe"), 1, {opacity:1}));
-
Hi, I've been working on building a loading 'spinner', had the basic animation working, but I've ran into an issue once I tried to add my tweens to a timeline. The code that works is: TweenMax.staggerFromTo(bars, duration, { opacity: 0.6, repeat: -1 }, { opacity: 0.2, repeat: -1 }, duration / numberOfBars); However, when I add a timeline: var tl = new TimelineMax({align:'sequence'}); tl.fromTo($spinner, 0.5, { opacity: 0 }, { opacity: 1 }); tl.addLabel('loop') tl.staggerFromTo(bars, duration, { opacity: 0.6, repeat: -1 }, { opacity: 0.2, repeat: -1 }, duration / numberOfBars); tl.play(0); the staggerFromTo does not seem to repeat and plays only once. (I was not sure whether the 'from' or the 'to' needed the repeat paramater, but seems like it needs to be in the 'to'.) Am I doing something wrong there? Thanks, Gavan
-
Hello, I have a problem when I created an ajax request and want to tween new elements in my DOM. The idea : I get thumbnails from a youtube playlist and when it's done I add all thumbnails in a grid inside my DOM. By default all elements are non visible, once it's get loaded I tween them to make their opacity to 1. I think, like it's new elements TweenMax don't see them and can't make the animation works. Here's my code : var YOUTUBE = { wrappervideo: $('#videos'), animation_videos: function(videos) { var TL = new TimelineLite(); TL.staggerFromTo(videos,3,{css:{opacity:0},css:{opacity:1}},0.2); // for(var i = videos.length - 1; i >= 0; i--) { // TL.append(TweenMax.to(YOUTUBE.videos[i]), 0.5, { // css: { // opacity: 1 // } // }); // }; // TL.play(); console.log(TL) }, get: function() { $.getJSON("//gdata.youtube.com/feeds/api/playlists/E269D6C105CB2EB6?&alt=json&max-results=10", function(data) { var thumbnails = new Array(); var video_grid = new Array(); var html = ""; var number_of_lines = 3; for(var i = parseInt(data.feed.openSearch$totalResults.$t - 1); i >= 0; i--) { thumbnails.push([data.feed.entry[i].media$group.media$thumbnail[0], data.feed.entry[i].media$group.media$thumbnail[1]]) }; for(var i = thumbnails.length - 1; i >= 0; i--) { var _left = ((thumbnails[i][0].width + 7) * Math.round(i % number_of_lines)); var _top = ((thumbnails[i][0].height + 7) * Math.floor(i / number_of_lines)); var video = "<img src='" + thumbnails[i][0].url + "' width='" + thumbnails[i][0].width + "px' height='" + thumbnails[i][0].height + "px' class='listvid' style='position:absolute;top:" + _top + "px;left:" + _left + "px;' data-min-height='" + thumbnails[i][1].height + "' data-min-width='" + thumbnails[i][1].width + "' data-min-url='" + thumbnails[i][1].url + "'></>" video_grid.push($(video)); html += video; }; YOUTUBE.wrappervideo.empty().append(html); TweenMax.set(YOUTUBE.wrappervideo, { css: { marginTop: -parseInt(thumbnails[0][0].height), marginLeft: -parseInt(thumbnails[0][0].width), display: 'block' } }); YOUTUBE.animation_videos(video_grid); }); } } Do you see where I can make the animation run ?
