Jump to content
Search Community

chiho

Members

  • Posts

    33

  • Joined

  • Last visited

 Content Type 

Posts posted by chiho

    Each line should go slower than the previous line of balls, so I get a water wave-effect like threejs particles waving

    in GSAP

    Posted

    1 hour ago, Shaun Gorneau said:

    Specifically to the part of the question "How can I get each line of balls moving a bit slower than the last line" ... you can pass a speed parameter to `new Circle` and use whatever math you like to calculate that value. I used something simple to illustrate. 

     

    See the Pen jpOQzB?editors=1011 by sgorneau (@sgorneau) on CodePen

    I meant the y-line instead of the x-line lol

     

    Each line should go slower than the previous line of balls, so I get a water wave-effect like threejs particles waving

    in GSAP

    Posted

    How can I get each line of balls moving a bit slower than the left line, meaning that line 1 goes faster than line 2, and line 2 goes bit faster than line 3 and so on. Moreover, how can I get the reflection of the five line next to the current one. So line 1 till 5 are now working in attached codepen url, but i also want line 6 till 10 , but then moving the opposite direction of the current first  five lines, instead of waving to the left, line 5-10 should be now waving to the right. Please keep the code DRY. 

    See the Pen ejYZXv?editors=1011 by chichichi (@chichichi) on CodePen

    Each section should have different animated shapes

    in GSAP

    Posted

    As you might see in the orange section there are animated lines with dots (this.draw = function()), whilst my expected result in the green part should be normal rectangles (this.draw2 = function()) instead of lines with dots. The animation in the green part should have two different opacities, so it seems like there are two different layers of animated background. 

     

    To make long story short:

    Green part should only call this.draw2 = function(), which are rectangles and besides that there are two different opacities. 

     

    How should I fix that.

     

    Really important is to not use CSS for this because of performance issues. Only Canvas allows. 

    See the Pen ZRZVxK?editors=1010 by chichichi (@chichichi) on CodePen

    four animated tiles which start all from different points

    in GSAP

    Posted

    I have built an animated tiles which now starts all from the same point, but what I want to achieve is that every tiles should have a different starting point. Most important thing here is that it should be maintainable, meaning that no matter how much tiles I add in the near future, it should randomly calculate a different starting point for each tile. 

    See the Pen ZRoPdQ?editors=1010 by chichichi (@chichichi) on CodePen

    Want lines animate diagonally

    in GSAP

    Posted 

    .line-two {
    height: 66px;
    width: 3px;
    background-color: $basic-orange-first;
    position: absolute;
    opacity: 0.2;
    z-index: -5;
    &:before {
        content: "....";
        letter-spacing: 4px;
        font-size: 18px;
        color: $basic-orange-first;
        margin-left: -9.6px;
        margin-top: -32px;
        position: absolute;
        transform: rotate(90deg);
    }
    &:after {
        content: "....";
        letter-spacing: 4px;
        font-size: 18px;
        color: $basic-orange-first;
        margin-left: -10.6px;
        margin-top: 64px;
        position: absolute;
        transform: rotate(90deg);
    }
}

     

    How resize and update square block animation

    in GSAP

    Posted 

    $(document).ready(function() {
	$(".client-logo").each(function(element) {
		TweenMax.defaultEase 	= Linear.easeNone;
		var tl 					= new TimelineMax({ onUpdate:updateUI,  repeatDelay: 0, paused:true, repeat: -1 });    

		var tlWidth 			= $('.image-client-inner').innerWidth();
		var tlHeight 			= $('.image-client-inner').innerHeight();
		var tlMargin 			= 10;

		tl.to(element.previousElementSibling, 0.58, {left: tlWidth-tlMargin}).
			to(element.previousElementSibling, 0.58, {top: tlHeight-tlMargin}).
			to(element.previousElementSibling, 0.58, {left: 0-tlMargin}).
			to(element.previousElementSibling, 0.58, {top:  0-tlMargin});
			
			element.animation = tl;

		})

		$(".client-logo").hover(over, out);
		
		function over() {
			this.animation.resume();
			console.log(this.animation);
		}

		function out() {
			this.animation.pause();
		}
		
		function updateUI()
		{
		//	alert('done');
		}	
});

    When the window is resizing, the animation should be repositioning themselves correctly. How should I do that properly?

     

×
×
  • Create New...