Juc1 Posted June 3, 2020 Share Posted June 3, 2020 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 More sharing options...
Shaun Gorneau Posted June 3, 2020 Share Posted June 3, 2020 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 7 Link to comment Share on other sites More sharing options...
Juc1 Posted June 3, 2020 Author Share Posted June 3, 2020 @ Shaun your results works fine thank you but can I do it without jQuery? Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted June 3, 2020 Share Posted June 3, 2020 Just now, Juc1 said: @ Shaun your results works fine thank you but can I do it without jQuery? Anything you can do with jQuery can be done with vanilla Javascript. In this case, look into https://www.w3schools.com/jsref/met_node_clonenode.asp 4 Link to comment Share on other sites More sharing options...
PointC Posted June 3, 2020 Share Posted June 3, 2020 let clone = document.querySelector("#one").cloneNode(true); document.querySelector("svg").appendChild(clone); tl.from("#two", {}).from("#three", {}).from(clone, {}); 5 Link to comment Share on other sites More sharing options...
Juc1 Posted June 3, 2020 Author Share Posted June 3, 2020 Thanks @ Shaun and Craig 👍 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted June 3, 2020 Share Posted June 3, 2020 You're welcome, @Juc1! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now