Jump to content
GreenSock

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

MORPH SVG IN A SECONDARY TIMELINE

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi guys,

still testing premium plugins for customers.

This time I'm trying to achieve this: morph svg while pinning its container and change the side text.
Once scrolled: morph the svg and change the sidetext.


On my demo I got as many svgs as many are the rows (using autoAlpha) - but I guess the best should a single pinned svg too, which morphs by scrolling.

Thanks for any help, never used the club Morph Plugin (and also never nested timelines, if this is what's needed here).

See the Pen OJzwByo by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

  • Solution

Yes one pinned SVG would do the trick. All your SVGs are the same, so I've just copied a blob I had on hand and animated between them. Your SVG is a lot more complex, so you'll probably need to create an animation for each shape you want to morph.

 

See the Pen JjMBeOe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4
Link to comment
Share on other sites

Oh wow!
Thanks, you point me to the right direction

  • Like 1
Link to comment
Share on other sites

Hi @mvaneijgen I did use your starting demo to something close to what I've been looking for (at least simplier).

This is the final result:

See the Pen GRywJOM by DedaloD (@DedaloD) on CodePen



I guess @Cassie would approve :P

Thanks all

  • Like 1
Link to comment
Share on other sites

I just cant understand whats the white space below?

Code seems the right one.

Could be somethin related to Codepen?

 

Link to comment
Share on other sites

@OSUblake thanks for the like! :)

Do you get any idea why I got that huge full white padding at bottom? Thanks

Link to comment
Share on other sites

 

Your SVGs are positioned in a way that they overflow the section @Dennyno - that's where the white space at the end is coming from.

 

Unbenannt.thumb.png.910d4da32b475f7fbd23078c808cb683.png

 

Try setting overflow: hidden on the .wrapper, that should resolve it.

 

.philosophie .wrapper {
  overflow: hidden;
  height: 100vh;
  width: 100%;
}

   

  • Like 5
Link to comment
Share on other sites

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