Jump to content
Search Community

transition - blank space

Milo_506 test
Moderator Tag

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)'})
 

Link to comment
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
Link to comment
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,})

Link to comment
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
Link to comment
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
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.
×
×
  • Create New...