Jump to content

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

SVG slideshow

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?



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

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




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 post
Share on other sites

@ Shaun your results works fine thank you but can I do it without jQuery?

Link to post
Share on other sites
let clone = document.querySelector("#one").cloneNode(true);


tl.from("#two", {}).from("#three", {}).from(clone, {});


  • Like 5
Link to post
Share on other sites

Thanks @ Shaun and Craig 👍

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.