Jump to content
GreenSock

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

transition - blank space

Recommended Posts

I try to make this transition of backgrounds  avoiding the space without images just at the middle of the transition, is that possible?

 

 

    .fromTo('#creature1',0.1, {backgroundImage:'url(img/creature1.png)'}, {backgroundImage:'url(img/creature1_mov2.png)'})
 

Share this post


Link to post
Share on other sites

Hey Milo and welcome to the GreenSock forums! 

 

I'm not sure I understand what you're asking for. Are you saying that at the middle of this tween that has a duration of 0.1 seconds, you want to switch out the images? If so, you should do the following:

  1. Make sure both images are loaded before the tween starts. It typically takes much longer than 0.05 seconds for an image to load, so the new image should be in memory before you try to show it.
  2. I would use a .set() call to switch out the images. Assuming that you're using a timeline and GSAP 3, would set it up like so:
    const tl = gsap.timeline()
      // Your other tweens in the timeline
      .set('#creature1', {backgroundImage:'url(img/creature1_mov2.png)'}, "+=0.05")
      // some other tween with a position parameter value of "+=0.05"
      // Your other tweens in the timeline

     

For more information about the position parameter check out this post:

 

  • Thanks 1

Share this post


Link to post
Share on other sites
53 minutes ago, ZachSaucier said:

Hey Milo and welcome to the GreenSock forums! 

 

I'm not sure I understand what you're asking for. Are you saying that at the middle of this tween that has a duration of 0.1 seconds, you want to switch out the images? If so, you should do the following:

  1. Make sure both images are loaded before the tween starts. It typically takes much longer than 0.05 seconds for an image to load, so the new image should be in memory before you try to show it.
  2. I would use a .set() call to switch out the images. Assuming that you're using a timeline and GSAP 3, would set it up like so:
    
    const tl = gsap.timeline()
      // Your other tweens in the timeline
      .set('#creature1', {backgroundImage:'url(img/creature1_mov2.png)'}, "+=0.05")
      // some other tween with a position parameter value of "+=0.05"
      // Your other tweens in the timeline

     

For more information about the position parameter check out this post:

 

Hi Zach, thank you, that really helps a lot, but the real thing that are pissing me off is the moment when the images change, how can I make that transition smoother? More specifically, I can see as a "flash" when images change, I want to avoid that "flash" in order to give more fluid to the image swap, is that possible?

 

mi TL:

_tt
    .set('#creature1', {css:{backgroundImage:'url(img/creature1.png)'}})
    .set('#creature2', {css:{backgroundImage:'url(img/creature2.png)'}})
    .to('#creature1',0.5,{y:-202, ease:eo2})
    .to('#creature2',0.5,{left:-2, ease:eo2}, "0.2")
    .to('#machine',0.5,{right: 0, ease:eo2}, "0.7")
    .set('#creature1', {backgroundImage:'url(img/creature1_mov2.png)',ease:eo2}, "+=0.05")
    .to('#creature1',0.5,{x:40, y:-199, ease:eo2, scale: 1.1,})
    .to('#creature2',0.5,{x:14, y:-14, ease:eo2, scale: 1.1,})

Share this post


Link to post
Share on other sites
1 minute ago, Milo_506 said:

More specifically, I can see as a "flash" when images change, I want to avoid that "flash" in order to give more fluid to the image swap, is that possible?

Loading the image beforehand like I said before can minimize that. Besides that, it might be better to have 2 images layered and just hide the one on top when need be.

  • Thanks 1

Share this post


Link to post
Share on other sites

By the way, there's no need for the css object in GSAP 3. And we recommend putting the duration inside of the vars parameter so that you can use GSAP's defaults functionality. For more info read here:

 

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, Milo_506 said:

the real thing that are pissing me off is the moment when the images change, how can I make that transition smoother? More specifically, I can see as a "flash" when images change, I want to avoid that "flash" in order to give more fluid to the image swap, is that possible?

 

Changing the image url is going to cause a flash. It's asynchronous. You either need to use a sprite sheet, multiple elements, or canvas.

  • Like 1

Share this post


Link to post
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.

×