Leaderboard

Hi and welcome to the GreenSock forums, there are 2 key components to solving this: you need to know what the "next animation" is. usually you assign this to a variable every time you click a new button the current animation needs an onReverseComplete callback function that will trigger the "next animation" or "requested animation" Below are 2 similar approaches

SplitText doesn't have anything to grab the last character or last word, but the wordDelimiter will allow you to specify where a word should be split. So if you want to throw a special character into your h1 you could do something like <h1>Latest News*!</h1> <h1>Questions*?</h1> and then var tl = new TimelineLite, mySplitText = new SplitText("h1", {type:"words", wordDelimiter:"*"}); that will result with 2 divs inside each h1 which may be an SEO NO NO. I also doubt you want to inject characters into your h1, but that's the easiest way I could think of by leveraging what SplitText can do and not writing any custom js. It's probably going to be better to write your own function that searches each heading for those characters and wraps them in spans.

I still don't think I quite understand, but if you want to scroll to the tween's 20% progress point whenever the mouse is released and the position is less than 20%, this seems to work: But if you're trying to get it to scroll so that it exactly centers the <p> that's closest to the center (when the mouse is released), that's an entirely different beast. Possible, but not as easy.

@Gabriel Norman Based on the site you referenced, scroll may not be your best option. Below is a pen that I modified from Sahil which may be helpful.

My preference is to use the DrawSVG plugin so I can get my work done faster and go out for pizza. ?

You're setting the strokeDashoffset as a CSS inline style, which has precedence over attributes. So you would need to set the attribute if you want to animate the attribute. TweenMax.set(path, { attr: { "stroke-dashoffset": 1 } }); My personal preference is to use CSS over presentation attributes so I don't run into problems like that.

You just want the x and y to always snap to the closest increment of 5 while dragging? If so, then use liveSnap: Remember that "snap" is only for Draggables that have throwProps enabled (it's just for the landing position after releasing, usually with momentum). You can use a function for liveSnap, as I showed in the demo above. Does that help?

Maybe like this.

Perfect! Thank you Very Much!! That is EXACTLY what I was trying to do -- Thanks again!

Perhaps you are right about writing a function. But the word delimiter is great and might get me out of trouble for now, thanks Carl!

GSAP animates stuff. Look at speech recognition. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API This demo works in Chrome. https://davidwalsh.name/demo/speech-recognition.php

Nice one Blake. ? I totally forgot to try it with autoRound.

What's your use case? Trying to do that while dragging is really complicated. There is nothing to stop a user from moving their mouse through a "blocked" element. See this demo. It's using a collision detection library with responses, but the dragging is a little wonky because you can move your mouse through blocks, causing your draggable to jump around. That's a demo I quickly modified from this thread. It could be done better, but I don't have the time to rework it.

No. Finding a tutorial that covers stuff like that is pretty rare. That demo is probably going to be one of the best sources to learn from. Knowing how to work with image data is probably the most important part of that demo, and it has nothing to do with three.js. They are using rgba values of a pixel to create the mesh, much like I'm using rgba values to create particles in this demo. The image data loop in my demo would look like this if I weren't animating it. for (var y = 0; y < height; y += grid) { for (var x = 0; x < width; x += grid) { var i = (y * width + x) * 4; var r = data[i]; var g = data[i + 1]; var b = data[i + 2]; var a = data[i + 3]; var alpha = a / 255; if (!alpha) { continue; } var particle = { color: "rgba(" + r + "," + g + "," + b + "," + alpha + ")", size: size, x: x, y: y }; particles.push(particle); } } If you look at line 100 in that three.js demo, you'll see that they are doing something very similar that. The guy who made that demo also has a post about image data with some three.js demos that are similar to my demo. https://codepen.io/Mamboleoo/post/how-to-convert-an-image-into-particles

You can draw an emoji on a canvas, which means you can get image data for it.

Hi @BeckBeach A mesh is like the geometry and the appearance/surface of something. Image an image. Now divide that image up into a grid. Each grid cell is split into two triangles. That's essentially what a mesh is. Animating a 2d mesh with PixiJS. The vertices are the corners of the grid cells, which are represented by the red dots. The vertices are stored inside a single array, which isn't a convenient object to animate, so I map the vertices to point objects. I then animate the point objects with GSAP, and then on every animation frame, map the point object values back to the vertices array. That might be easier to do with three.js, but the concept is still the same. You can animate the points (vectors) of a mesh. Check out this demo. It's not using GSAP, but it's the same effect you're asking about. This is what the burger looks like. They are using canvas to convert that image into a mesh. They loop through the image data, getting the rgba value of a pixel at a certain interval, and use those values to set the color and xyz value of a vector. To learn more about image data, check out this tutorial... https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas And this post... https://codepen.io/rachsmith/post/getting-getimagedata

Here is a new pen that does several things ... 1. Takes the background image applied to each <section>, prepends a new set of elements within each section and applies that background to the inner element. The reason it applies to the new inner element is to make it easy to tween the outer element without affecting the inline style of the inner. <div class="background-image-wrapper"><div class="background-image" style="background-image: url(//copied/from/<section>)"></div></div> 2. Now tweens the `y` of each background-image-wrapper (rather than the css image-background) along with a slight tween of the rotation to force hardware acceleration. Side note ... I prefer to Tween elements x/y with background images applied rather than the x/y of an <img> because responsive full-screen (or even just full-width) images are so much easier with css `background: cover`. 3. I've timed the slide tween to be perfectly in sync with the background-image-wrapper tween and increased the image tween distance ... makes for a better parallax effect. 4. Allow for down and right keys to move down the page, up and left key move up the page. 5. isScrolling is now set to `false` when the last Tween has completed. This should offer a better mouse-wheel experience. But ... I'm not sure ... I'm using swipe gestures on a trackpad and an Apple Magic Mouse. Not sure what it's like on a physical wheel without momentum. I've tested in MacOS High Sierra (10.13.4) ... Safari, Chrome, Firefox, and Opera on a 2013 MacBook Air ( i7 1.7Ghz, 8 GB ram, Intel HD Graphics 5000 1536 MB) ... fairly modest specs. The results I see are Safari 11.1 - Buttery smooth with the *occasional* minor snag Chrome 66 - Buttery smooth until it's not :/ It's perfect, then hangs for .5 seconds, then perfect again .. on pretty much each slide transition. No idea why. Opera 52 - Nearly identical to Chrome (to be expected) Firefox 59.0.2 - Holy sh*t! Didn't expect it to be so good ... I usually wrestle with Firefox. It's perfect there ... I just need to do some image preloading.

Sure, blame the After Effects guy. You nailed it with: "it's also not built into GSAP". Here's how I usually perform the calculations for those animations: That's what I call the 1-click solution to get a bazillion new keyframes. Figuring out the math and creating the function to make it happen is best to left to true geniuses and/or residents of the Matrix. Having something like that built into GSAP would be pretty darn cool.