[Showcase: How was it made?]

Hi All,

 

I received an automated email that suggested I check out the showcase (Examples section) of the website. I love these examples but struggle to find how they are built with GSAP other than the basic animation here and there. (competent beginner with GSAP) I can always inspect the document, but seem to get lost other than the basics as I can never reverse engineer them when i try.

 

How are some of these examples built? there are heaps of beginner tutorials, but nothing i can find at an intermediate or advanced level.

 

One that is listed: https://nestpowerproject.withgoogle.com/

 

 

[MorphSVG to occur when slider transitions]

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.

[MorphSVG to occur when slider transitions]

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