tailbreezy

I have added a reference from the forums to my answer. Check it out.

Hello, alignOrigin works when you align to a path. motionPath: { path: "#line", align: "#line", alignOrigin: [0.5,0.5] } Another way is to align:self and to offsetY, say by your circle radius value motionPath: { path: "#current-line-ironer", align: "self", offsetY:-14.3, } As for your align question, check this thread. Jack explained this case.

Your #cont doesn't move because it has position:static (default). If you want to move it on click you have to set it absolute, relative, etc. It seems you are after a sidebar that translates the page content to the right. var tl = gsap.timeline({paused:true, reversed:true}) .to("#cont", { duration:1, left:120 }); window.addEventListener('click', () => { tl.reversed() ? tl.play() : tl.reverse() })

Hello Alle, Regardless of solution you will need some kind of logic that directly reflects the actual load progress. Then you just feed it into width/scale and innerText. Scale is more performant than width, so you can probably stick with it. Also making the same querySelection on each onUpdate is unnecessary, you can just save a variable beforehand. Currently this will fire 5*60 times( since we have 5secs) but we are only updating 1 to 100, so maybe not ideal, so we are overwriting a lot of those (e.g 1.1 => 1, 1.2 => 1, etc) Tap into the real progress for better results. This looks like a good start if you like another approach to JS Performance Timing. https://www.freakyjolly.com/how-to-pre-post-load-assets-like-images-css-js-files-using-preload-js-liberary/#.YEVQz2h8JTY https://codepen.io/dadacoded/pen/28b7da79ad3162c196dcccb63436292e?editors=1010

Hello there, You can just execute your functions in the master timeline. Note that since typewriter blinker has a repeat: -1, its duration will be very high (infinite-like), so you cannot space your animations with '>' positional parameter, you have to hard code the duration you pass in (possibly store it in a var and reference it here). If you don't space them out, both will start immediately. masterTL .add(loadPara1()) .add(loadPara2(), 4)

Hello there, Not sure what you mean by excess, it is pretty short. function playVideo(el) { let vid = document.getElementById(el); vid.play(); } function pauseVideo(el) { let vid = document.getElementById(el); vid.pause(); } You basically select the needed video and tap into HTML Video methods play() and pause(). Nothing special really. https://www.w3schools.com/tags/ref_av_dom.asp let video = document.querySelector('video') ScrollTrigger.create({ trigger: video, start: 'top center', end: 'bottom center', onEnter: () => video.play(), onLeave: () => video.pause(), });

Hello there, This space between the gray and orange panel is caused by pinSpacing. It is an option for the scrollTrigger that adds space in order to space elements in the DOM quickly. If you remove it, you will have to push your remaining content by the same value you use in scrollTrigger. Other than this, your rule tl.to('.text', {...}) will tween all your text classes at the same time (e.g when you reach your orange panel the text will be in its completed state). let tl = gsap.timeline({ scrollTrigger: { trigger: ".gray", scrub: true, pin: true, pinSpacing:false, start: "top top", end:"500%", markers:true } }); gsap.set('.orange', {yPercent:500})

Indeed looks that way. Have you tried setting: ctx.fill("nonzero"); It seems to do what you want.

Thanks, Jack and PointC. I mostly wanted to know how this could be done in gsap, since it does a lot of paths manipulation and this method had potential to do exactly that. In the meantime I was looking at this npm utility. If anyone is interested in the same. It seems to be a little more involved in handling most of svg path commands. It is nothing too complicated, just some regEx and array rearranging, but handles some edge cases. https://github.com/Pomax/svg-path-reverse/blob/gh-pages/reverse.js

Thanks. Your answer indirectly answered my question. (there isn't such a method) Which is all I have asked in the first place. Not really sure why we have to turn it into a game of Q&A.

So, there isn't a method? I know of at least a couple of ways to hack what I want to achieve, but thought this method would be a lot easier. If this was in fact what it did. from d="M 25,50 C 25,100 150,100 150,50" to d="M 150,50 C 150,100 25,100 25,50 The paths could be more complex.

@ZachSaucierThanks for chiming in. 100% 0% is not what I am looking for. Also Illustrator is a none issue, I was just pointing out the effect. I want to actually reverse the direction of the path. Is this what this method did in the past?

Hello, I am searching for a way to reverse the direction of a SVG stroke. (exactly like in Illustrator or similar software). It seems there was a method pathDataToBezier, on which you could call .reverse(). var bezier = MorphSVGPlugin.pathDataToBezier($('.big-path')[0]).reverse(); This was suggest some time ago by @PointC but @ZachSaucier some time after suggested that this is no longer possible since gsap 3. Is there still such a method in some of the plugins, it seems everything bezier/rawPath related moved to MotionPath plugin.

Not necessarily. You can create new Image() that is not part of the DOM and attach onload and src on it.

You can check when image is loaded and then simply add it as a background with HTMLelem.style.backgroundImage or simply toggle a class on load.

Hello kisha, I haven't used an event listener on a single image, but I do believe you can check by attaching the eventListener on the image itself. img.addEventListener( "load", () => { /* code */ })

Hello Aleksei, This will probably solves your issue. if (closed) { gsap.to(main, { duration: 1, height: (_,t) => { let prevHeight = gsap.getProperty(t,'height') t.style.height = 'auto' let h = gsap.getProperty(t,'height') t.style.height = prevHeight + 'px' return h + 'px' }, paddingBottom: 20 });

Hello trych, Have you considered attaching the tween on the element itself. document.querySelector('.target") target.animation = gsap.timeline() animation is just a prop name, you can name it anything.

Hello, Interesting, Power4 should be accessible. Have you tried to use the more conventional way ease: "power4"?

If it works on desktop and you can see the setting applied on mobile. It could be a media query issue.

Hello jonias, It is called position paramenter. You can read more about it here.

There are many topics that have such content, but I would also appreciate a pinned section with works/experiments.

FLIP is pretty new for tutorials, only a few months old. Could be some, but I still don't know about them. As for barba.js you can check out ihatetomatoes. He also have some other nice courses on gsap. https://ihatetomatoes.net/get-barba-101/

It is tween related so it should be in defaults. This will apply it to every single tween in the timeline though. Might be not what you are after. gsap.timeline({ defaults: { clearProps: true } })

Hello, If you have an issue when resizing, you should have code that handles resizing. You should also manage your timelines and kill them off before resizing, to avoid pile up. window.onresize = () => { your code } window.addEventListener('resize', () => { your code })