[Liquid container animation on hover]

hi @Annelies, might be a long time since you asked but, here's where you will find your way: https://tympanus.net/codrops/2019/10/23/making-gooey-image-hover-effects-with-three-js/

 

even when it's possible to achieve something very similar with gsap, webgl will give you exact control. hope it helps 

 

cheers

[Color tween wont work after changing position from absolute to fixed]

Hello people!

I have a <nav> with absolute position and inside of it some links <a>. After some scrolling I change its position to fixed to stick it at the top.  (using stickOnScroll plugin)

At the beginning I bind a mouseover to tween color of the text in <a> and works fine, but when I change it to fixed position the tween disappear. 

 

Thank you so much!

<nav class="full-width" id="home_menu">
    <ul class="container">
        <li><a href="javascrip:void(0)">slim center</a></li>
        <li><a href="javascrip:void(0)" id="menu2">tratamientos</a></li>
        <li><a href="javascrip:void(0)">estilo de vida</a></li>
        <li><a href="javascrip:void(0)">por un méxico más sano</a></li>
    </ul>
</nav>



nav#home_menu{
  position: absolute;
  height: 60px;
  top: 700px;
  width: 100%;
  border-top: solid 1px white;
  border-bottom: solid 1px white;
}

nav#home_menu ul{
  min-height: 60px;
  height: 60px;
  top:0;
  width:1200px;
  left:50%;
  ;
}

nav#home_menu ul li{
  display: inline;
  float: left;
}

nav#home_menu ul li a{
  display: inline-block;
  margin-top: 23px;
  width: 295px;
  text-align: center;
}





$("#home_menu").stickOnScroll({
        topOffset: 0,
        setParentOnStick:   true,
        setWidthOnStick:    true,
        onStick: onSticknav
    });






function onSticknav()
{
    $('#menu2').bind('mouseover', overMenu);
}

function overMenu(e)
{
   TweenMax.to($(e.currentTarget), .4, {color:"#009aff"});
}

[Mp3Loader; Making a Perfect Loop]

Its easy, imagine your sound has four parts A,B,C,D. So you'll need the sound to perform twice measures like A,B,C,D-A,B,C,D. Let's imagine that each measure takes 10 seconds so the total time is 20 seconds.
 

Then in your code:

//add a playback method to follow playhead 
yourSound.addEventListener(MP3Loader.PLAY_PROGRESS, onProgress);

function onProgress (e:LoaderEvent) 
{
if (e.currentTarget.soundTime >= 11) //just after one second of the first measure, take playhead to one second after the beginning of your sound (in my case I have to use .95 to match perfectly)
{
DKK.gotoSoundTime(.95, true);
}
}
 

there you have a gapless sound using .mp3

[Animating with TweenLite bezier with line as guide]

Hi, I found kind of a solution. It only works if you draw in a simple direction to the right and down but not if you go back to the left or up (doesn't work if you draw a circle)
 

var myBitmapData:BitmapData = new BitmapData(500, 500)
myBitmapData.draw(new Path());
var myBitmap:Bitmap = new Bitmap(myBitmapData);

var throughPoints:Array = new Array();
var pathINDX:Number = 0;
var ballSpeed:Number = 30;
var firstPoint:Boolean = false;

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0x66CCFF, 1);

function generatePath () 
{
	for (var xpath:Number = 0; xpath < myBitmapData.width; xpath++) 
	{
		for (var ypath:Number = 0; ypath < myBitmapData.height; ypath++) 
		{
			if (myBitmapData.getPixel32(xpath,ypath).toString(16) != "ffffffff" ) 
			{
				throughPoints.push([xpath, ypath]);
				
				if (!firstPoint) 
				{
					firstPoint = true;
					my_shape.graphics.moveTo(xpath, ypath); 
				}
				
				my_shape.graphics.lineTo(xpath, ypath);
			}
		}
	}
	
	my_shape.graphics.endFill();
}

function onFrame (e:Event):void 
{
	if (pathINDX<throughPoints.length-ballSpeed) 
	{
		pathINDX+=ballSpeed;
	
		ball_mc.x = throughPoints[pathINDX][0];
		ball_mc.y = throughPoints[pathINDX][1];
	}
}

addEventListener(Event.ENTER_FRAME, onFrame);
generatePath ();