Jump to content

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

Animating width not smooth

Recommended Posts

Hello people


I have a problem. I created the animation which you can see in my codepen. The third animation is not smooth in chrome and safari. It is working ok in firefox but in chrome and safari it is shaky. Anyone any idea why this is happening? I'm animation the width from 0 to 100% of the inner div. I know animation width is not according to the flip approach but well, didn't know how to solve the problem otherwise. 


Ah you need to scroll down so the animation starts. 


Any help appreciated! 


External link: https://condescending-bhabha-c8e37c.netlify.com/circle_house.html

See the Pen VVOqrL by elpeyotl (@elpeyotl) on CodePen

Link to comment
Share on other sites

okay I found out when i change the animation__fourth width to a fixed width it is working. How is it possible to pass a variable there for the width? i Get undefinded. 

Link to comment
Share on other sites

Hi @elpeyotl and welcome to the GreenSock Forum!~


Sorry your having issues. Based on your above codepen example i see that it is throwing a error on a script being loaded in, es.promise.js.


Maybe its a codepen permissions issue? I didn't see any undefined variables in the codepen due to that script loading an error.


Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." es6.promise.js:97

08:50:50.811 Unhandled promise rejection FirebaseError: "Missing or insufficient permissions."
	e https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:412535
	openStream https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:497518
	f https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:496766
	Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938
	dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470
	Ca https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1219538
	Oa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1217188
	dd https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1185311
	ed https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184627
	ad https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184022
	Sa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206393
	nb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206350
	Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938
	dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470
	ve https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1191916
	jb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213667
	Na https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213639


To just output variable of getBoundingClientRect() width, then use this:


var iconBoxRect = iconBox.getBoundingClientRect();


Happy Tweening :)

  • Like 5
Link to comment
Share on other sites

Hi @elpeyotl,

Inline SVG means many lines in the HTML, but is great to work on and looks perfect:


See the Pen qQzXYe by mikeK (@mikeK) on CodePen


Happy masking and tweening ...





  • Like 7
Link to comment
Share on other sites

@mikel thank you. this is awsome. could you please explain me what you actualy did so i cant unterstand it? What was your workflow. I think i dont unterstand how to mask stuff in svg.

  • Like 1
Link to comment
Share on other sites

Hi @elpeyotl,

Or this from Jenkov (****).


My workflow in short:

  • Clean the source code of your svg images: svgomg
  • New svg - starting with part '#total'
  • Add the other parts (same viewbox) and group all their elements (<g> </ g>)
  • The masks are hand coded - its easy if rectangles
  • Important: The closer the color of the masking shape is to #ffffff (white), the more opaque the shape using the mask will be.
  • Important: reference the mask ID attribute (e.g .: <g id = "total" mask = "url (#MaskTotal)">)
  • Important: Series of parts. First #factory, then #total (transparent through the mask), ... last #oneStart (there is no z-index!)
  • You can tween x, y, width, height ... of the masks. Orientate yourself by the dimensions of the viewBox = "0 0 232 232"
  • #total: two separate masks half of the viewbox, the left is tweened by width, the rights by x-position

Hope this helps you ...


  • Like 8
Link to comment
Share on other sites

@mikel Thank you very very much for this explanations! Awsome. I'm tring to rebuild your codepen. struggling with the masks. Well I have to understand that clearly.


But thtanks. way better approach with a big svg file, than extra divs and containers.

  • Like 1
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.