[Smooth scroll to next panel - too fast]

Hey everyone,

 

This isn't directly GSAP related but I've been struggling for days to figure this out and would really appreciate some help.

 

I have built a site using GSAP and Scrollmagic.

 

The site is broken into panels and animations are triggered as you reach each panel. That part is all great and works well.

 

I also have that on the mousewheel scroll the next (or previous) panel comes into view. Almost like a snapping effect. This functionality was based on the codepen example.

 

Is there any way I can slow down the transition from one panel to the next? I have payed with the "speed" amount, but the scroll in is still really fast before that speed easing kicks in. 

 

Any ideas would be amazing! Thank you!

Andy

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

[Animate 2 slideshows on 1 click]

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 !

[Animate 2 slideshows on 1 click]

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!

[Animate 2 slideshows on 1 click]

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

[Animate 2 slideshows on 1 click]

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!

[Remote freelancer required for interactive hero banner with animation. Incl video backgrounds and SVG draw.]

Hi, 

 

I'm looking for a GSAP developer who could create a full screen interactive module as illustrated in the attached video clip.

 

The site is already in development but we need help with this more advanced module that will be embedded in the home page hero banner.

 

Experience required:

- GSAP

- Preloader animation with progress bar

- Video controlling (play, pause, etc)

- SVG animation

 

It would need to be completed in approximately 3 weeks time. All assets, including images, SVGs and video clips would be supplied.

 

Please watch through the short video example of what we are after and if you feel this is something you could develop for us please contact me as soon as possible to arrange a Skype chat.

 

 

Note: there are two sides "Precision" and "Unleashed". Clicking on each word expands the relevant side and plays the video.

Please also ignore the logo in top right, the button in bottom center, as well as the mail icon in bottom right.

 

If you have any questions please comment below.

 

Looking forward to working with one of you geniuses

 

Thanks, 

Andy

[Animate 2 slideshows on 1 click]

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.

[Animate 2 slideshows on 1 click]

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

[Animate 2 slideshows on 1 click]

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