kisha

var myImage = new Image(); myImage.src = 'src/images/img.jpg'; myImage.addEventListener('load', function() { init() } I done this and it works. Thank you

Hi again! Yes, the latter codepen is exactly what I needed. I just noticed that I had similar result using different technique than you used here (however this is imperfect solution, as the flat/ending shape is never really flat, there is 2px on left top and right top point, and also starting point is not perfect rectangle, if i made them perfect it wouldn't work), also if I use your paths from your codepen, and add them to my example, it becomes mess again for whatever reason: A Pen by kohlej (codepen.io) Anyway, your solution solved my problem of making it perfect, I copied the SVG in illustrator and I think I got better understanding of how you done it. Thank you so much.

Hi @PointC, It's been a few months, but I finally got time to go back to this project. I was able to do get all the points by following your guide from motiontricks, here is the codepen: https://codepen.io/kohlej/pen/qBqoKNQ?editors=1010 But I was not able to do the same when I would curve the middle point...The result is...well here is the link: https://codepen.io/kohlej/pen/BaQrxOX?editors=1010 I tried all kind of tweaking the svg code with no luck...Is there anything you could tell by looking at these codepens that Im doing wrong?

I see, am I suppose to hide the image that is added with <img> tag with with display: none;? Because I just want to show it as background. Im guessing that's the trick? I'm not sure what you mean by toggling a class on load but I will look into it

Hi and thanks for commenting. That seems like it's working if my image is in HTML, but I set it as background-image in CSS, and it doesn't work this way

Hi, well title is the question. I dont want to use window.addEventListener('load') because I dont want to wait for everything to be loaded, but just for the image which is in viewport when website is loaded...(image is set as css background) Is there any vanilla JS or greensock solution, or I need to use something like https://imagesloaded.desandro.com/?

Hi @GreenSock Thank you for answer and sorry for late replay. You are not misunderstanding, that's exactly what I mean. It looks like when I use app.stage.addChild adds couple ms of freeze before adding sprite/image to the stage, and then it looks like gsap tween doesn't start from the very beginning. I dont know why the css version isn't the smooth for you, did you uncomment both JS and CSS lines? Anyway, after running live server, try hard refreshing and you might see better what I mean by tween not starting from the beginning. In more complex example where i have more app.stage.addChild with diffferent spirits, which load on click, the "lag" is event more apparent and tween is past 50% of animation before Im even able to see the start of tween animation.

After trying to debug for 2h after posting this, only useful info I could get is that app.stage.addChild is the one that makes the page "freeze" for couple milliseconds and that is what's causing it, even tho assets are preloaded.

I uploaded the small file because I'm loading image with pixi from local storage and I couldn't adapt code for codepen So inside doneLoading function I placed my simple tween that is suppose to scaleY to 0 the cover that is covering image, once the image is loaded, it works but the animation render starts from very beggining. (I have also used gsap.set for transfromOrigin) However if I use CSS for transition and transfrom-origin, and then add this line in doneLoading function it works smoothly from the start cover.style.transfrom = scaleY(0) But I want it to work with gsap. Is there something I'm missing? codepen pixi.7z

Thank you! This is useful

Ty Zach...I was able to get same number of points to get given result..I will upload demo later...GSAP subscribtion looks pretty cool but not really in position to buy it right now. It really werid when I was making vectors in illustrator (I tried xd and figma too). Output would always have different numbers of points, and I tried a lot of tweaks before it would print same amount of points

@Shrug ¯\_(ツ)_/¯ Hi guys, I happen to stumble on this post while I was searching for similar effect. I tried to make it but with no luck. Can anyone eloborate what Im doing wrong and help me? Here is the codepen: https://codepen.io/kishadark/pen/YzqZmgY My goal is to have similar result as OP just kinda reversed. Thank you in advance

Yess! Really wanted this one. Thank you

Thanks! I sure will rewatch it.

Hi and thanks. It worked for me. Do you mind telling me why use of anim.pause(0) for onLeaveBack? Does pause(0) reset it? I read some docs and saw options like reset and reverse for toggle actions.