[How to make a bouncy line with Gsap]

Just to expand on that post I linked to, here is how to calculate the control point for a quadratic Bezier at a set point. 

See the Pen c298db6e99eef0b9258968aa148a6d0c?editors=0010 by osublake (@osublake) on CodePen

 

And here's a simplified version of that springy path demo using GSAP.

See the Pen 613dea251165576962577e898b1a4ce7?editors=0010 by osublake (@osublake) on CodePen

 

It's really amazing, thank you so much for your time, I really appreciate it.

I'll try to work on my own project and make a codepen demo for the other guys with some cool effects

[How to make a bouncy line with Gsap]

Canvas, SVG, doesn't matter, it's the same process. You're manipulating a Bezier curve. That site looks like it's using a simple quadratic Bezier curve. This post might help you understand how it works. You can replace the tween.js code with GSAP.

http://codepen.io/rachsmith/post/grokking-quadratic-bezier-curves-in-svg

Thank you so much  OSUblake

it was the exact thing that I wanted, 

and it really explained it so well, so I think that I could understand each line of the code!

Thanks again for mentioning this page.

[How to make a bouncy line with Gsap]

Hello there!

 

I was wondering ,how could I make a bouncy line with Gsap?

I mean, like when we move the mouse over it, it stretches in the same Y or X position of the mouse.

 

best example is this website :

waaark.com/

 

which is made by using Gsap as an animation Engine,

 

when you hover the mouse on the right side elements, you can see it has a stretching effect, which is awesome!

I wanna know, how could I make something like (or near) that effect,

thanks.

best regards

s.rb

[Problem with some elements using TweenMax]

Hello guys,

 

problem solved :

My silly mistake in css, didn't put px for the 0 values!

please delete this post if its irrelevant.

 

 

I'm tryin to make a Tree Chart, with some basic tweens,

 

I was working on it in a different Html file and everything was okay,

but as soon as I copied it in my main project file (even codepen)

some of them, doesnt show up.

 

I've attached my codepen,

and you can check that "CsecondLineHorizontalstop" Class,

which has width:0px in css, doesnt get the specified width in the tween!

 

 

 

 

Thank you ,

Best Regards

s.rb

 

[How to make a tween works only one time (on click event)]

Hi there.

 

I was working on a tween and after finishing it I decided to put it into an onClick function,

 

my problem is I only want it to work once after clicking on the button,

I know I have to use the pause() or kill()  method,

but my problem is 

where should i pause it ?

$('#home').click(function(){
            
            //"Context"  animation
            var secPageh1 = document.getElementById("secPageContext");
            var tm = TweenMax.from(secPageh1,1.5,{left:350,autoAlpha:0,delay:0.3,ease: Power2.easeOut});
	}); 

 

this is my onClick function but I dont know how to make it pause after 1 time running.

 

Thank you

[Scrolling Page using Transform matrix instead of href property]

Thank you 

• Carl ,
• Jonathan

 

It kinda solved my problem, And I have to say , Till now, I couldn't see any issue in GSAP and I wish it gets better and better.

(congrats to the founders and GSAP progammers)

[Scrolling Page using Transform matrix instead of href property]

Hello guys.

 

I'm back with another question

well,

 

I want to know is there any other way that I could trigger the ending point instead of using href tag?

The only way that I've found to do this, is using transform matrix property of css.

I wanted to use greensock ScrollTo property in order to animate the scrolling process,but as it seems 

Gsap uses href property in order to find the destination.

Is there anyother way so that I could do this without referring the href ?

I have an example website but I don't know what he's been using for doing this,

and I can mention it here if it might help.

 

Thank you very much.

S.rb

[need help with Animation Scrollto with tweenMax]

hmm, not so sure what's wrong just by looking at the code. It would really help if you could create a CodePen demo that clearly illustrates the problem with as little code as possible. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Might be good to just find the original CodePen you based your code off of, fork it, and edit it so that it fails in a similar fashion to your production code. We don't need to see any fancy images or the real layout. Just enough to see it not working. 

 

Thanks!

 

Solved the problem xD

 

I'll mention the solution here for those who have same problem as me 

 

I'll double checked my entire Js code, and I was sure that it's completely okay,so I thought that it might be the css!

and I was right

I had to hidden the overflow because of the wrapper width (which is more than the viewport), but my problem was,

I've accidently set the overflow property to hidden for both my "BODY" and the "Wrapper" which is wrong,

and when I removed the overflow property from the wrapper, it works Perfect xD

 

anyway,

Thank you Carl , because of your fast answer;

and sorry if I took your time, because of an accidental issue.

[need help with Animation Scrollto with tweenMax]

Hello everybody,

 

I'll just get right into the work xD

 

here is the thing,  I was trying to animate the scrolling process with tweenMax but I kinda don't know what exactly is going on 

with my code.

so I'll just thought that you guys could help me with it,

here is the scrolling section (which I customized a codepen that was nearly what I wanted it) :
 

var wrapper = $("#wrapper"),
$menu = $(".navbar");
    $menu.on("click","a", function(){
    var $this = $(this),
        href = $this.attr("href"),
        topX = $(href).offset().left;
    TweenMax.to($(window), 2, {
        scrollTo:{
        x: topX,
        autoKill: true
        }, 
        ease:Elastic 
     });
        return false;
});  

What I want to do is, when the user clicked on the tag "a" which is in the "li" tag, the page would scroll into the specified page.

(which is Left to right, instead of top to bottom that's why I've changed the offset into left)

 

I don't know what is wrong with my code, 

when I set the return to True, it scrolls to the page but tweenmax doesn't work!

 

 

Thank you so much,

S.Rb

 

[Help!how to trigger animations to start when we scroll certain amount]

Hi soheil22 

 

Welcome to the GreenSock forums.

 

For scroll triggered animations, ScrollMagic is one of the easiest ways to make it happen. 

 

http://scrollmagic.io/

 

You should check out Petr Tichy's site (one of our forum moderators). He has quite a bit of training for it.

 

https://ihatetomatoe...magic-tutorial/

https://ihatetomatoe...th-scrollmagic/

 

You should also have a look at the ScrollTo plugin

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

 

...and this recent discussion may be of interest:

 

http://greensock.com/forums/topic/14912-parallax-scrolling-sections/

 

Hopefully that helps a bit.

 

Happy tweening and scrolling.

Hello PointC

Thanks a lot for such a fast asnwer,really fascinated by that

I know petr and I've seen some of his toturials in youtube, 

thank you again for the answer and  the links you mentioned,

I have definitely got my answer.

[Help!how to trigger animations to start when we scroll certain amount]

Hello Greensock.

this is my first topic here xD little newbie with Gsap.

As I mentioned in the Title , I need a lit a bit help with scroll event.

I want to fire animation after certain amount of scrolling.

I'd be really appreciated if you could give me a toturial or a hint about it.

 

Thank you so much 

Best Regards,

S.Rb