Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mintervals

timelineMax staggerTo, simple on/off image cycle.

Recommended Posts

Hi, I want to achieve an image cycle similar to a movieclip in flash or .gif, where each frame holds a image.

 

Each 'frame' has it's own image and that's it.

 

I was able to take the existing jsFiddle and modify to a simple cycle loop.

 

This works great until you try and use a image with transparency (you see that all the images are just fading on each other).

 

http://jsfiddle.net/w8MnU/24/

 

 

I know this is so simple I just can't wrap my head around it- The idea is to have no 'transition' just on/off on .pngs with transparency with the abilities of timelineMax....

 

Thanks!

Share this post


Link to post
Share on other sites

Hi,

 

I wouldn't recommend neither timelineMax and stagger in order to do that, it's far more simple to create a recursive function that tweens the images from autoAlpha:0 to autoAlpha:1. Also in order to achieve a no transition effect you can use TweenLite/Max.set, that method is the equivalent to using a tween that lasts 0 seconds:

TweenMax.to(element, 0 {autoAlpha:0});
//this is equal to the following
TweenMax.set(element, {autoAlpha:0})
//also can be used with TweenLite
TweenLite.set(element, {autoAlpha:0});

//And you can use it inside a timeline in the same way you use the convenience to method
var tl = new TimelineMax();

tl.set(element, {autoAlpha:0});

The code would be like this:

$(document).ready(function(){

var images = $('img'),
    count = images.length,
	transitions = 1,
    timeline = new TimelineMax({repeat:-1, repeatDelay:1.5});
	
TweenMax.set(images, {autoAlpha:0});
TweenMax.set($(".active"), {autoAlpha:1});

function fadeImage()
{
	console.log(transitions);
    var active = $(".active"),
		next = active.next();
	
	TweenMax.set(active, {autoAlpha:0, className:"-=active"});
	TweenMax.set(next, {autoAlpha:1, className:'+=active', onComplete:nextImage});
	
	transitions++;
	
	console.log(transitions);
}

setTimeout(fadeImage,1000);

function nextImage()
{
	if(transitions < count)
	{
		setTimeout(fadeImage,1000);
	}
	else
	{
		transitions = 0;
		TweenMax.set(images[0], {autoAlpha:1, className:'+=active'});
		setTimeout(fadeImage,1000);
	}
}

});

I set up a codepen with the same images (kindly provided by Carl, thanks Carl!!), so you can see it working:

See the Pen ydfBb by rhernando (@rhernando) on CodePen

 

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1

Share this post


Link to post
Share on other sites

This is great stuff, keep up the great work Rodrigo. Thanks!

Share this post


Link to post
Share on other sites

For the record, it'd probably be simplest (and most efficient) to just toggle the visibility of the elements, and you can easily tuck them into a TimelineMax so that you can alter the timeScale() anytime, or reverse, or whatever:

var images = $('img'),
    timeline = new TimelineMax({repeat:-1, repeatDelay:.25});
//set everything to invisible initially
TweenLite.set(images, {visibility:"hidden"});

//now just toggle visibility. Set immediateRender to false because normally zero-duration tweens render immediately but we're sequencing things so we don't want that.
timeline.staggerTo(images, 0, {visibility:"visible", immediateRender:false}, .25);

IMPORTANT: You were using a very old version of TweenMax. Please update because a bunch of improvements have been made, like you don't need to use the css:{} wrapper anymore (although it is perfectly acceptable to do that if you prefer). And the staggerTo() method looks for jQuery instances and correctly handles each element inside the result set. 

 

Here's a forked jsfiddle: 

http://jsfiddle.net/vbXv4/

 

Is that the effect you were looking for? 

Share this post


Link to post
Share on other sites

Yep, but his particular problem is that he's trying to do that with, I presume, semi-transparent pngs,

This works great until you try and use a image with transparency (you see that all the images are just fading on each other).

and the problem with staggerTo is that keeps the preceding images visible, so you can see them through the images placed above, that's why my proposal was to tween the current image's alpha to 0 and the next one to 1, so it can be used in that scenario.

 

My first try was in fact do a stagger with a 0 duration, but after viewing the result on firebug I realized the visibility problem if used with transparent files:

stagger-images.jpgCheers,

Rodrigo.

Share this post


Link to post
Share on other sites

Ah yes, great point. Then we should be able to just add another staggerTo() to set visibility back to "hidden" after each chunk of time:

var images = $('img'), 
    duration = 0.25, 
    timeline = new TimelineMax({repeat:-1});

//set everything to invisible initially
TweenLite.set(images, {visibility:"hidden"});

//now just toggle visibility. Set immediateRender to false because normally zero-duration tweens render immediately but we're sequencing things so we don't want that.
timeline.staggerTo(images, 0, {visibility:"visible", immediateRender:false}, duration);

//and then after each tween, we need to set visibility back to "hidden"
timeline.staggerTo(images, 0, {visibility:"hidden", immediateRender:false}, duration, duration);

Here's a revised jsfiddle: http://jsfiddle.net/vbXv4/1/

 

Does that address the concern?

  • Like 2

Share this post


Link to post
Share on other sites

Thanks again, for the continued discussion. Having the properties of TimeLineMax for image sequences is really great.  

 

For further clarification of my project -

 

I have an array of .png images and there's a push button. When you push the button it flips though them really fast like a game show and stops on one image. Ideally it would slow down and stop.

 

Then if you click again it removes that last item it landed on from the array and continues forward until the array is exhausted.

 

I wanted to use TimeLineMax for the speed, and other properties like reverse, repeat, timescale etc.

 

I'm going to try an implement the above code, thanks so much!

Share this post


Link to post
Share on other sites

She-eet, I love this forum! Thanks Jack, saved my day - a couple of hours anyway :)

  • Like 2

Share this post


Link to post
Share on other sites

Haha, same here @NDF. 

This is exactly what I was looking for.

Share this post


Link to post
Share on other sites

Great illustration of how to automatically run images... One question: I want to be able to fade each image in and out and tried using  ease:Power1.easeInOut, in the code but it doesn't do anything - My JSFiddle link -> http://jsfiddle.net/perfG1/p7rn1nk4/1/

Share this post


Link to post
Share on other sites

It's a little more tricky when you've gotta loop back to the beginning and have the end and start transition seamlessly, but it's totally doable. Here's one approach: 

var images = $('img'),
    showDuration = 2,
    transitionDuration = 0.5,
    timeline = new TimelineMax({repeat:-1});

//set everything to invisible initially except the first one
TweenLite.set(images, {autoAlpha:0});
TweenLite.set(images[0], {autoAlpha:1});

//now loop through the images and transition each one (and once the top one has faded in, set the bottom one back to invisible to improve performance)
for (var i = 1; i < images.length; i++) {
    timeline.to(images[i], transitionDuration, {autoAlpha:1}, (showDuration + transitionDuration) * i - transitionDuration);
    timeline.to(images[i-1], 0.01, {autoAlpha:0}, (showDuration + transitionDuration) * i);
}
timeline.add("end", "+=" + showDuration);
timeline.set(images[0], {autoAlpha:1}, "end"); //the first image should be fully opaque/visible so that when we fade the last image out, the first one is revealed.
timeline.to(images[images.length-1], transitionDuration, {autoAlpha:0}, "end");
Is that what you're looking for? 

Share this post


Link to post
Share on other sites

I am almost there! I put this on my site and I have a couple of minor issues that need to be sorted out:

1. Post -> https://www.pgurus.com/two-half-years-still-no-justice-sunanda/

 

Issues:

1. I am explicitly specifying in my iframe no border and yet a border shows up on the left and top... <iframe width="696" height="1740" border="0" src="//pgurus.com/myJS/html/bmpsDissolving.html" scrolling="no"></iframe>

 

2. How do I scale my images? When I see the post on my iPhone, the image is cut off...

 

Thanks in advance!

Share this post


Link to post
Share on other sites

I fixed 1 above, it was frameborder not border. Still looking for scaling code that will work for the majority of new browsers.

Share this post


Link to post
Share on other sites

I wish we had the time and resources to offer free general support for all types of HTML/CSS/JS/development issues, but we really need to keep these forums focused on GSAP-specific questions. If you need help with other things, perhaps try posting on stack overflow or a site like that. Let us know if you have any GSAP-specific questions; we'd be happy to help. 

Share this post


Link to post
Share on other sites

Understood and appreciate your help in solving the problem.

Share this post


Link to post
Share on other sites

Hi all,
 

Im trying to do something very similar to this but what I think is much more simple(not for me as I am just starting out with greensock).

 

I have three images that I am trying to transition to but with no flicker or fade currently my code looks like this

tl
  .from($one, 0.1, {autoAlpha:0,})
  .to($one, 0.1, {autoAlpha:1,})
  .to($one, 0.1, {autoAlpha:0,})
  .from($two, 0.1, {autoAlpha:0,})
  .to($two, 0.1, {autoAlpha:1,})
  .to($two, 0.1, {autoAlpha:0,})
  .from($three, 0.1, {autoAlpha:0,})
  .to($three, 0.1, {autoAlpha:1,})
  .to($three, 0.1, {autoAlpha:0,})
  .from($four, 0.1, {autoAlpha:0,})
  .to($four, 0.1, {autoAlpha:1,})
  .to($four, 0.1, {autoAlpha:0,})
  .from($five, 0.1, {autoAlpha:0,})
  .to($five, 0.1, {autoAlpha:1,})
  .to($five, 0.1, {autoAlpha:0,})

as you can probably see I want the animation to be quite fast but with no fade/flicker which is what I seem to be getting.

 

Im basically using those five images as a walk cycle for a letter image that needs to look like its walking on the spot.

 

Thanks in advance for any help.

Jenna

Share this post


Link to post
Share on other sites

Hi Jenna!

 

Welcome to the forums!

 

Have you looked into the other topics about sprite animation?

 

https://greensock.com/forums/topic/15708-is-it-possible-to-animate-spritesheet-through-gsap/

 

It sounds like it's the sort of thing you should explore from the description of your issue.

Hi Dipscom, thank you I think this is exactly what I need!

 

Will I still be able to add this into my animation at anypoint in the timeline? I saw a few examples of nested timelines or is that complicating things?

Sorry for all the questions as I'm just starting out and new to coding!

 

*edit

Also would I be able to move between states on the sprite sheet like start at 1 go to 2 and have it repeat 2 and 3 and then at a point go back to one or 4?

 

Jenna

Share this post


Link to post
Share on other sites

Hi Jenna,

 

How about this: Start a thread of your own on this matter, then ask everything that your heart desire in there relevant to the topic. Whenever you have any question that is not relevant to the topic you can start another topic.

 

That helps keep the questions/threads answers very focused and easy to follow. When others come along and search what has been discussed, it's a lot easier for them to find the relevant info if they're going over a thread with 6-10 answers rather than one with 6-10 pages.

 

:)

 

And, no, nested timelines are not complicated.

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×