Jump to content
Search Community

MORPH SVG IN A SECONDARY TIMELINE

Dennyno test
Moderator Tag

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

 

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.
×
×
  • Create New...