Dennyno Posted April 12, 2022 Share Posted April 12, 2022 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 More sharing options...
Solution mvaneijgen Posted April 12, 2022 Solution Share Posted April 12, 2022 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 4 Link to comment Share on other sites More sharing options...
Dennyno Posted April 12, 2022 Author Share Posted April 12, 2022 Oh wow! Thanks, you point me to the right direction 1 Link to comment Share on other sites More sharing options...
Dennyno Posted April 15, 2022 Author Share Posted April 15, 2022 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 Thanks all 1 Link to comment Share on other sites More sharing options...
Dennyno Posted April 15, 2022 Author Share Posted April 15, 2022 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 More sharing options...
Dennyno Posted April 16, 2022 Author Share Posted April 16, 2022 @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 More sharing options...
akapowl Posted April 16, 2022 Share Posted April 16, 2022 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. Try setting overflow: hidden on the .wrapper, that should resolve it. .philosophie .wrapper { overflow: hidden; height: 100vh; width: 100%; } 5 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now