Jump to content
GreenSock

prjbios

smooth stopmotion frame by frame animation/loop

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Everyone, I've had a great time playing with GSAP lately (it had been awhile).

 

I've been able to do everything ive wanted to accomplish except for one thing a smooth frame by frame animation loop without any delays on the first frame.

 

no matter what i've tried i eventually get a skip or a delay.  

 

 

I've settled on two methods of achieving this goal.  but again, neither have been ideal.

 

One attempt is this

    <div class="bgs">
        <img src="img/key/5.jpg" >
        <img src="img/key/3.jpg" >
        <img src="img/key/2.jpg" >
    </div>

    var imgs = document.querySelectorAll('.backgrounds img');

    var facelooptl =new TimelineMax({repeat:18, yoyo: true})
        .staggerFrom(imgs,0,{opacity:0,ease:Linear.easeNone},0.2)
    
    
    
 

 

 

the other attempt i made was something like this.

 

 

   //the other attempt is something like below
    
    facelooptl = new TimelineMax({repeat:-1});

	
	facelooptl.add('background2')
		.from('#background2', 0.3, {opacity: 1, ease: Power4.easeInOut }, 'background2+=0');
	
	facelooptl.add('background3')
	    .to('#background2', 0.3, { opacity: 1, ease: Power4.easeInOut }, 'background3')
	    .from('#background3', 0.3, {opacity: 0, ease: Power4.easeInOut }, 'background3+=2');
	
	facelooptl.add('background4')
	    .to('#background3', 0.3, { opacity: 1, ease: Power4.easeInOut }, 'background4')
	    .from('#background4', 0.3, {opacity: 0, ease: Power4.easeInOut }, 'background4+=2');



    //these backgrounds have images set in the css.
	<div class="backgrounds" id="background1">
	</div>
	<div class="backgrounds" id="background2">
	</div>
	<div class="backgrounds" id="background3">
	</div>
	<div class="backgrounds" id="background4">
	</div>
	<div class="backgrounds" id="background5">
	</div>
	<div class="backgrounds" id="background6">
	</div>

 

 

both of these attempts were found off of this forum.

 

 

Can anyone offer insight?

 

 

 

 

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

It would really help if you could provide a reduced test case as explained here:

 

 

GSAP takes timing accuracy very seriously and its hard to imagine a timing issue in the code you posted. if we can see it running it would help so much.

 

 

FWIW the demo below shows multiple ways of approaching spritesheet animations and all 3 run perfectly synchronized and I've never seen them skip or delay. 

 

 

See the Pen aJcGl?editors=0010 by jamiejefferson (@jamiejefferson) on CodePen

 

  • Like 3
Link to comment
Share on other sites

  • 3 years later...

Carl, this solution will flash from frame to frame, if it's running on a bogged down device.. it's like there's a fraction of a second, where the last image is hidden, and the new one is being displayed.. 😕  It doesn't happen at the same second..

 

I ended up just making my own simple javascript function that changes the div id, which are all set with different background-image's... much more smooth, as there's not that brief second of one div being hidden, and another being shown.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×