billy nugz

Ahhhhh a Ticker and Timeline... got it, thanks for sharing that!... FYI I haven't met a "Cassie" who wasn't an awesome human. Stay gold Cassie!

This is what I'm doing but stitching things up to the mouse move seems like it's a bit of a trick. I'm thinking it might be better to use a timeline approach as the icons on the resources page (https://gsap.com/resources/) seem to follow the mouse for a sec, then die, can you trigger an animation after kill I wonder? Any help on achieving this effect is welcome. 😃 const tiles = document.querySelectorAll('.flair-anim'); const colourfultileHolder = document.getElementById('colourfultileHolder'); let currentTileIndex = 0; // To keep track of which tile to animate next let lastAnimationTime = 0; // To track when the last animation was started function animateTile(tile, startPosition) { const timeNow = Date.now(); const timeElapsedSinceLastAnimation = timeNow - lastAnimationTime; const delay = Math.max(0, 400 - timeElapsedSinceLastAnimation); // Wait for at least 0.2 seconds since the last animation // Set a timeout to delay the animation if needed setTimeout(() => { // Calculate the relative positions for animation const startX = startPosition.x - tile.offsetWidth / 2; const startY = startPosition.y - tile.offsetHeight / 2; // Set the tile's starting position and properties gsap.set(tile, { x: startX, y: startY, scale: 0, opacity: 1, rotation: 0, scale: 0.5 // Starting from a smaller scale }); // Animate the tile to the end position and fade out gsap.to(tile, { x: startX, // Move to the right y: startY, // Move to the bottom of the viewport rotation: -300, opacity: 0, scale: 1.5, duration: 1.5, ease: "power1.in", onComplete: () => { // Reset the tile's properties for the next animation gsap.set(tile, { scale: 0.5, opacity: 0, rotation: 0 }); } }); // Update the time for the last animation lastAnimationTime = Date.now(); }, delay); } function recordMousePosition(e) { // Record the current mouse position const rect = colourfultileHolder.getBoundingClientRect(); const mousePosition = { x: e.clientX - rect.left, y: e.clientY - rect.top }; // Get the next tile to animate const tile = tiles[currentTileIndex % tiles.length]; currentTileIndex++; // Move to the next tile for the next animation // Call the animate function with the current mouse position animateTile(tile, mousePosition); } // Add mousemove event listener colourfultileHolder.addEventListener('mousemove', recordMousePosition);

Hello, I really like the way the "flair-anim" divs animate in and out on the resources page. I went poking around the DOM to see if I could locate the JS controlling it but couldn't find it. How would one go about recreating this effect? I'm trying to get a fiddle going here (https://jsfiddle.net/Ldrgp1h7/) but I can't get the timing of this right. Any response is welcome... My thanks in advance.

Wanted to add my 2 cents as I stumbled across this thread in my own search for help with gsap/barba. So far this seems to work for me. Still in dev so no warranties on production level code here var tlLoader = new TimelineMax({}); //Using timeline in my project var FadeTransition = Barba.BaseTransition.extend({ //define the transition in barba start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) //when new container is loading run you transition animation .then(this.fadeIn.bind(this)); }, fadeOut: function() { var deferred = Barba.Utils.deferred(); //define deferre so you can wait for transition to complete tlLoader.set('#loader',{y:'0%'}); //run your fade in tweens here I'm Morphing a svg over my content but you can do whatever you wish tlLoader.to('#loader-bg-svg-path', 1, {morphSVG:'M 0 -5 L10 -10 L10 15 L0 20 Z',ease:Linear.easeNone, onComplete: function () { deferred.resolve(); } }); return deferred.promise; //return deferred to promise so we can move to fadeIn step }, fadeIn: function() { document.body.scrollTop = 0; //this scrollTop might be redundant Im still in dev with this this.scrollTop(); var $el = $(this.newContainer); //run your fade out tweens here tlLoader.to('#loader-bg-svg-path', 0.7, {morphSVG:'M 0 15 L10 10 L10 15 L0 20 Z',ease:Linear.easeNone}); tlLoader.to('#loader', 0, {y:'-100%',ease:Linear.easeNone}); tlLoader.set('#loader-bg-svg-path', {morphSVG:'M 0 -5 L10 -10 L10 -5 L0 0 Z',ease:Linear.easeNone}); this.done(); }, scrollTop: function() { var deferred = Barba.Utils.deferred(); var obj = { y: window.pageYOffset }; TweenLite.to(obj, 0.4, { y: 0, onUpdate: function() { if (obj.y === 0) { deferred.resolve(); } window.scroll(0, obj.y); }, onComplete: function() { deferred.resolve(); } }); return deferred.promise; } }); Barba.Pjax.getTransition = function() { return FadeTransition; };

First off thank you for taking the time to write that. I really do appreciate it and would not be this far along with out the help. I poked around with things off and on today and think I came up with a solution for running this with multiple svgs/canvases/contexts. Take a peek and let me know what you think, its a little loopy (pun intended) but should work. Thanks again guys, *Bill sends virtual chest bump*

Hey guys, agreed, trying to jam to much jelly on the bread at once I have stepped away from it for the evening. The morphsvg stuff and canvas animation is new to me. From the little I know about svg and canvas I read there were a few performance/browser compatibility pluses to rendering to canvas. Thats why I chose this route. I'm guessing I should get the svg animating the way I like it then render that animated svg to the canvas. Currently I'm doing the reverse with some strange results. I will strip it down and take another stab at it and report back. Thanks again guys.

Ok guys, is there anyway to animate only certain paths on a svg? Also should you animate the svg then change context of canvas or create canvas context and then animate the specific paths? Take a look at what I'm doing on this pen, the 1,2,3 approach above is what I need to do (I think) but I'm falling flat on the animation part. My thanks in advance.

Hey, Yes thanks. A little bit to go before production but this is a great starting point thanks again for the info. Once done I will post the results.

Hey thanks for the response, sorry if I wasn't clear. Basically I wanted to use MorphSVG to animate 3 or more svg paths smoothly. I'm currently trying to pick apart this code pen. Its a little much for what I want to do but performance wise seems fine. I'm really just working toward a simplified version of this (code pen below) and was wondering about best practice as it relates to MorphSVG/TimelineMax. Is it better to use TimelineMax to achieve this? Worse? Why? Thanks again.

Hello, I'm trying to mimic the morphing effects found on this sight https://en.creddy.ru I started modifying some of the examples I found poking around the forums (code pen attached) but I cant seem to get the Timeline animations to be as smooth. The rough approach I want to take for this would be as follows: 1 Loop through all "image containers" find find svg 2 Loop through svg to find paths with class "morph" 3 Use the morph paths to create animation Step 1 and 2 I can solve for but I don't know enough about the MorphSVG plugin to make the effect smooth and via canvas. I assumed using TLM would be the best bet but if anyone has any pointers or suggestions on how to approach this better please let me know. My thanks in advance.

Hmmm looks like switching to alpha worked out. TweenLite.from(content, 1, {delay:0,css:{alpha:0}}); TweenLite.from(document.getElementById("myLogoImg"), 1, {delay:1,css:{alpha:0}});

Hey there, Im trying to set up a simple animation for a child and parent div set up like so; <div id="content"> <img src="logo.png" id="myLogoImg"> </div> The content div has a background that I would like to autoAlpha up from 0 then bring my myLogoImg up after a 1 second delay. The problem Im having is that I can only ever seem to tween one or the other not both. my tweens look like this TweenLite.from(document.getElementById("myLogoImg"), 3, {delay:0,css:{autoAlpha:0}}); TweenLite.from(document.getElementById("content"), 3, {delay:3,css:{autoAlpha:0}}); Am I going about this in the wrong way? My thanks in advance.