CRE-ATE Posted April 26 Share Posted April 26 Hello hope someone can help, I am doing a logo which scales and descales when you scroll down. On Chrome + Firefox it works perfect. Tried it with a SVG + PNG got 2 example but cannot seem to fix the issue and look on forums on forum on forum HELP ME! PNG version See the Pen oNOVwPa by jimmee (@jimmee) on CodePen SVG version Thanks, James See the Pen ExJMXJL by jimmee (@jimmee) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 26 Share Posted April 26 Hi @CRE-ATE welcome to the forum! What for me works best is having the scale always between 0 and 1, where 0 is the minimum and 1 is the max it can have, setting scale beyond that will result in rendering bugs/issues. So in your case make the logo as big as you want it to be and then scale it .to() the value you want it. See demo below. Hope it helps and happy tweening! See the Pen PogLKwP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
CRE-ATE Posted April 26 Author Share Posted April 26 Hello @mvaneijgen thanks this works perfect. When I did that I noticed that it now scales small to larger when I implemented it on a website. It doesn't show this on our codepens but here's a wee 3sec video https://capture.dropbox.com/PXau4JcCYRJc1GqQ. Do you know how I reverse it, as it should be LARGE and then scale DOWN when scrolling down the page. Am a super beginner, but learning each day. So thanks thank thankssssssss Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted April 26 Solution Share Posted April 26 Check the demo again. I've changed your tween from a .from() to a .to(), so that will reverse the logic. So in my example it scales from scale: 1 to scale: 0.1 Link to comment Share on other sites More sharing options...
CRE-ATE Posted April 26 Author Share Posted April 26 hello @mvaneijgen your are a super star, thank your help todayif we meet in the future, beers on me 1 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