Jump to content
GreenSock

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

Animate 2 slideshows on 1 click

Recommended Posts

Hey! Really hoping you geniuses can help me out...

 

I have 2 slideshows (Slides and Titles). They work well independently of each other with separate buttons controlling the next/prev Slide, or next/prev Title.

 

I need to have both Slides and Titles animate when clicking the same next/prev buttons.

 

When I do set them to use the same button only one of the slideshows changes.

 

Note: the reason I went for separate slideshows is that the Titles need to sit on top of the image Slides, rather than being nested in each slide, like normal.

 

Any help would be very much appreciated!

 

Shout out to Jonathan Marzullo for the amazing looping slideshow JS - https://codepen.io/jonathan/

See the Pen gJRavQ by andystent (@andystent) on CodePen

Share this post


Link to post
Share on other sites

Hi @andystent,

 

There's a lot going on in your pen .. and a lot of duplication of work which could be greatly simplified. That said ... consolidating everything (kind of as is) into single calls will make one button press control two sets of tweens.

 

See the Pen mYwOdP?editors=0110 by sgorneau (@sgorneau) on CodePen

 

But, you should look at refactoring your code to get rid of unnecessary complexities.

  • Like 3

Share this post


Link to post
Share on other sites

Hi @andystent,

 

Welcome to the GreenSock Forum.

 

What is the reason behind 'the Titles need to sit on top of the image slides'?

What effect would you like to achieve?

 

Best regards

Mikel

 

 

Share this post


Link to post
Share on other sites

Shaun! You are an absolute legend! Thank you so much. I know what you mean about the duplicate code but I ended up doing that cus I couldn't get it to work in a more consolidated way. I'll implement this and see what I can do to simplify it.

Thank again

  • Like 1

Share this post


Link to post
Share on other sites
On 5/17/2019 at 6:48 PM, mikel said:

Hi @andystent,

 

Welcome to the GreenSock Forum.

 

What is the reason behind 'the Titles need to sit on top of the image slides'?

What effect would you like to achieve?

 

Best regards

Mikel

 

 

@mikel Thank you. Essentially the images would scroll across the screen when the button is clicked but the title wrapper will always be visible in the same spot. I hope that makes sense. Thank again.

Share this post


Link to post
Share on other sites
On 5/17/2019 at 6:36 PM, Shaun Gorneau said:

Hi @andystent,

 

There's a lot going on in your pen .. and a lot of duplication of work which could be greatly simplified. That said ... consolidating everything (kind of as is) into single calls will make one button press control two sets of tweens.

 

 

 

 

But, you should look at refactoring your code to get rid of unnecessary complexities.

Hey @Shaun Gorneau, Thank you so much again for the help before!

 

I wonder if you could help with one more thing? I can't seem to find a simple way of making this autoplay with a delay between slides of a few seconds. 

 

Could you point me in the right direction?

 

Thank you so much!

Share this post


Link to post
Share on other sites

HI @andystent,

 

It's been a while since I've looked at this one ... can you remind me why the slides and titles are children of separate elements?

Share this post


Link to post
Share on other sites

Hey, thank you for the quick reply.

 

Essentially the background (image) and the titles animate separately. Here is the live version to give you an idea of how it works: http://initials.co.uk/

 

The slideshow is in the second panel if you scroll down (Showcase).

 

Please let me know if you have any other questions. Thanks you again!

Andy

Screen-Shot-2019-09-01-at-16.52.19-(2).jpg

Share this post


Link to post
Share on other sites
On 9/1/2019 at 9:00 AM, andystent said:

I can't seem to find a simple way of making this autoplay with a delay between slides of a few seconds. 

 

Could you point me in the right direction?

Hey Andy,

 

Without taking a look at your code (there's a lot going on), here's a description of what should happen.

  1. Make a timeline of the slide animation (or a function that calls itself), perhaps with a delay at the beginning. Pause it on page load.
  2. When that section is navigated to, start (or continue, if navigated back to) that timeline. 
  3. When a user interacts, kill the timeline and use functions for animating between slides.

It would be helpful if you made a minimal example of your issue in something like a CodePen like you did before just for this issue if you'd like more help with code. Otherwise if you have specific questions we're happy to help :) 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
On 9/1/2019 at 10:55 AM, andystent said:

Hey, thank you for the quick reply.

 

Essentially the background (image) and the titles animate separately. Here is the live version to give you an idea of how it works: http://initials.co.uk/

 

The slideshow is in the second panel if you scroll down (Showcase).

 

Please let me know if you have any other questions. Thanks you again!

Andy

Screen-Shot-2019-09-01-at-16.52.19-(2).jpg

 

Ah ... I see. Makes sense based on both the image and the text each towing in their successors.

 

While presentationally that's cool if Javascript is doing its thing ... it's a bit out of wack from an accessibility standpoint (and certainly if Javascript fails for some reason). I would recommend the HTML side of this is structured semantically, and then let Javascript reconstruct for the presentation.

 

Have a look at the Pen below ...

 

Lines 4 through 30 are just about manipulating the DOM to go from semantic markup to presentational structure.

Lines 32 through 58 are just about looping through slides and titles to create a timeline and set its initial position.

Lines 61 through 91 are about controlling the timeline and looping around when needed.

 

You would probably also want to look at suppressing click events during slide tweens.

 

See the Pen jONGJre?editors=0110 by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
19 hours ago, Shaun Gorneau said:

Hope this helps!

Thank you so much for the help here @Shaun Gorneau !

 

This is much cleaner and easier to understand. I will experiment with your pen version and see if I can get the autoplay to work there, and will be in touch if I need a hand :)

 

Again, appreciate your time!

Share this post


Link to post
Share on other sites
On 9/3/2019 at 2:31 PM, ZachSaucier said:

Hey Andy,

 

Without taking a look at your code (there's a lot going on), here's a description of what should happen.

  1. Make a timeline of the slide animation (or a function that calls itself), perhaps with a delay at the beginning. Pause it on page load.
  2. When that section is navigated to, start (or continue, if navigated back to) that timeline. 
  3. When a user interacts, kill the timeline and use functions for animating between slides.

It would be helpful if you made a minimal example of your issue in something like a CodePen like you did before just for this issue if you'd like more help with code. Otherwise if you have specific questions we're happy to help :) 

 

Thank you for the guidance here @ZachSaucier !

Share this post


Link to post
Share on other sites
On 9/4/2019 at 11:04 AM, andystent said:

Thank you so much for the help here @Shaun Gorneau !

 

Happy to help!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×