Jump to content
Search Community

SVG slideshow

Juc1 test
Moderator Tag

Recommended Posts

Hi all,

 

In my slideshow I want

slide # 1 to load on page load,

then slide # 2 to cover slide #1,

then slide # 3 to cover slide #2,

then slide #1 to cover slide #3

then a smooth restart.

 

Can anyone please correct my codepen?

 

Thanks...

See the Pen vYLYdBm by Juc1 (@Juc1) on CodePen

Link to comment
Share on other sites

Hi @Juc1,

 

The way I usually handle something like this is by cloning the first slide, appending it to the end, and allowing it to become the final tween before restarting the timeline. This gives a nice, seamless affect of an infinite stack.

 

In my case, I'm using jQuery clone and appendTo to take care of this (because it makes it dead simple).

 

The other thing is, I reordered the SVG <g> elements to be one, two, three (rather than three, two, one) to take advantage of the default stacking order.

 

See the Pen gOPOeeY?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Happy tweening!

 

Shaun

 

Edit: Also note that since you are using the same properties and values on each tween ... you can stuff those into the timeline's defaults and not have to worry about assigning them to the individual tween's :)

  • Like 7
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...