[How to: Basic Tweening on the page within a div?]

I am working with the tween.from(element,duration,etc). There are two tweening properties I would like to do:

 

First, I would like to make elements enter the page from the top or bottom of the viewport. I can make them enter from the left side or the right side. What is the property you pass to create vertical movement?

 

 

Second, I would like to move an element within a fixed dive. During the animation, I would also like the element to be diplay:hidden until it enters the element. the homepage banner is a perfect example of what I am looking to create.

 

 

Here is the simplified code I am running on my site now.

See the Pen gnImi by anon (@anon) on CodePen

 

cheers!

[need help incorporating Hover Animation to nested elements]

Thanks Jonathan,

 

I ended up using the first method (timeline is next weeks lesson). The button looks great!

 

cheers

[need help incorporating Hover Animation to nested elements]

Jonathan,

 

Here is an example of how I would go about combining two different tweens into one. 

See the Pen CacAg by anon (@anon) on CodePen

 

In this particular codpen I am trying to create a pulsating border while changing the background color and font color when the user hovers over the button.

 

The pulse uses the .fromTo() while the background color and font color uses a .tweenLite()

 

The code above allows for one or the other to work but not both simultaneously.

 

How would I make them both work at the same time when hovering over?

 

cheers

[Hover animation activating on load instead of hover- any ideas?]

Thanks for the codepen the pulse animation looks a lot better now.

 

I still cannot get the background color to shift to black and the text color to white upon mouse enter. here is my updated

See the Pen teozD by anon (@anon) on CodePen

[Hover animation activating on load instead of hover- any ideas?]

I am working with the 3d animation box shadowing effect. I am able to get the design I want however the hover effects are occuring onload instead of when the mouse is hovering over.

 

here is my

See the Pen wlFno by anon (@anon) on CodePen

 

How do I make it so the green border and black background only appear when hovering? 

 

Note: sometimes the green pulse only occurs on hover (I would say it works) however the black background comes in permanently when it should only turn black on hover.

 

cheers

[need help incorporating Hover Animation to nested elements]

Jonathan,

 

Will do.

[need help incorporating Hover Animation to nested elements]

I really cannot thank the two of you enough for the help!

 

Jonathan, How do I code multiple tweens on one element, such as an anchor tag, I was fiddling around with this idea to no avail.

 

 

Thanks again!

[need help incorporating Hover Animation to nested elements]

Thanks Rodrigo,

 

I dont have a reason for using the section for the event listener. what should I make the event listener look to? when I swithch it to btnAnimate i loose all the hover properties.

 

I changed the code for the best practice and have the background fill but am still struggling with the font color. Would this be something in my css that needs to change?

 

 

also, do you know how I would use jquery instead of js to accomplish the same task?

 

Cheer

[need help incorporating Hover Animation to nested elements]

Hello,

 

I and trying to replicate the hover box shadow tweens from the GASP site http://www.greensock.com/css3/ in this case under the box shadow section the "white blur button".

 

I can get the box shadow to appear but the background color and font color do not switch to my tweened properties upon mouseEnter.

 

Here is my codepen 

See the Pen hcdtb by anon (@anon) on CodePen

 

How do I get the background color and font color to change too?

 

Cheers

[Having Trouble With Button Hover Animation]

Legendary Jonathan, Thanks!

[Having Trouble With Button Hover Animation]

HI,

 

I thought I made progress with a previous post on button hover 3d animation- guess not. It was explained very well but for some reason I am not able to translate it to other GASP box shadow styles.

http://forums.greensock.com/topic/9355-how-to-animate-buttons-on-hover-with-gsap/

 

I am trying to work my way up through the different 3d box shadow properties located here: http://www.greensock.com/css3/ this time I am working on the orange blur box shadow.

 

Here is my code: 

See the Pen bkBLa by anon (@anon) on CodePen

 

My end goal is to have these box shadow properties to run when user hovers on any buttons on my site.

[How To Animate Buttons on Hover with GSAP]

Hello,

 

I am a fan of the 3d button hover options under the Box Shadow section shown on this page http://www.greensock.com/css3/  I am attempting to replicate the box titled "sharp shadow" (with then end goal of moving up to the more complex box shadow features in that section)

 

Conceptually I am not understanding how to activate a hover design animation with tweens. I have attached a codepen where I have the design ready to go when the page loads; however, nothing is happening. 

See the Pen vzjDB by anon (@anon) on CodePen

 

Cheers In advance!

 

(PS Newbie)

[Can I/How to, do basic Tweenlite Animations in the opposite direction]

Hi,

 

I like the bar/ logo delay animation showed in the jumpstart section  http://www.greensock.com/jump-start-js/#delay

 

The green bar in the example runs from left to right. Is there a way to run this bar animation from right to left?

[How to Run Tweenlite and TweenMax script simultaneously]

Thanks @jamiejefferson, I figured the issue was coming from the windows.onload function; however, I am so new to JS that I didnt know what other function to call.

 

Cheers

[How to Run Tweenlite and TweenMax script simultaneously]

I would like to combine two tweenlite scripts with one tweenMax script. If I dont include the tweenMax the tweenLite script executes and vis versa.

 

Can you simultaneously run tweenMax tweens and tweenLites? If so how?

 

CodpenLink: 

See the Pen JvcEt by anon (@anon) on CodePen

 

 

Note:Orange Block represents the logo

 

Cheers