Jump to content
GreenSock

jiggles78

MorphSVG to occur when slider transitions

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I'm trying to morphSVG on Slider page transitions. I have been able to get the slide transitions working. However I can't seem to figure out how to cycle through the multiple SVG's.

 

Problem: How to cycle through SVG list as each slide goes down.

 

Example: I have managed to have it change on scroll down and scroll up, but this limits me to just the 2 blobs.

I am after;

  • Slide 1 to have svgblob1
  • Slide 2 to have svgblob2
  • Slide 3 to have svgblob3
  • Slide #n to have svgblob#n

 

See the Pen ERJoNw by jiggles78 (@jiggles78) on CodePen

 

I have used Mikel's Pen found in the comments here as a solid base:

 

Thank you in advance :)

See the Pen ERJoNw by jiggles78 (@jiggles78) on CodePen

Link to comment
Share on other sites

Hi @jiggles78 ,

 

Welcome to the GreenSock Forum.

 

Your idea is great. To use this slider code, you could do it like this (only a quick approach!):

 

See the Pen RJOqWV by mikeK (@mikeK) on CodePen

 

The wonderfull construct of @OSUblake, each Slide triggers a separate animation, is also feasible.

 

Happy tweening ...

Mikel

 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thank you @mikel.

 

There are quite a few extra tricks in there that I have learnt from and will be helpful as the project builds.

As I can not control the User scrolling too fast,  I would like the blob to morph to whatever relative slide they are on.

i.e. Blob 1 for slide 1 relates to the content.

 

I've played with it a bit more (longer than i would like to admit), and can't seem to quite figure out how to let this occur.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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.
×