Animating an element from the bottom

[neelu]

Hi,

 

I am using the ScrollMagic Jquery plugin to create a parallax site.

 

For one of my sections I would like to animate an element in from the bottom of the screen to finish in the middle. 

 

The element will come into view as the user is scrolling the page.

 

I am struggling to animate anything in from the bottom of the screen. I have looked online for this answer for a while and after trying many different things I am still nowhere near a solution.

 

Not only do I want the element to animate in from the bottom once its reached a certain place on the div it needs to lock in place whilst the user is still scrolling and then I will have it fade out and display another element. 

 

Thanks in advance for any help. 

[Jonathan]

Hello neelu, and welcome to the GreenSock Forum!

 

From what you wrote above it might be a conflict with top and bottom CSS properties. If the element your trying to position and animate with is the bottom CSS property. Then you have to make sure that there are no other CSS external rules or inline CSS that have a value for the CSS top property.

 

This is because the browser will be buggy when you try to animate the bottom CSS property when top is already declared with a value. You won't even be able to use !important on the bottom CSS property because CSS top property will take precedence and cause a conflict when the browser tries to calculate the CSS bottom property.

 

From my own expierence, to make it cross browser, make sure there are no conflicts with declaring both top and bottom on an element. Meaning either declare top only or bottom only on an element to make sure the browser calculates correctly.

 

When in doubt you could just animate the x property in GSAP instead of left.. and y property in GSAP instead of top. Then you don't have to worry about the conflict of top and bottom on the same element.

 

If this is not the issue..

 

Then please provide some code for context. Here is a great video tut by GreenSock on How to create a codepen example demo.

 

This way by seeing your code in action, and code that we can test and edit.. we will be able to help you better!

 

Thanks

[jamiejefferson]

You can also 'reset' top (or left/right/bottom) to its default by applying

top: auto;

[Rodrigo]

Hi,

 

If I'm not mistaken scroll magic has a pin option, which works in the same way as using a postion:fixed (I'm pretty sure that the plugin adds that to the inline style) to prevent the element from moving while the user scrolls. Perhaps you can ask in the github repository:

 

https://github.com/janpaepke/ScrollMagic

 

Another option is to add the position fixed to the element and as Jonathan pointed use only top, like this:

.element-class
{
  position:fixed;
  top:150%;
}

The only requirement is that the element's parent has to be positioned too, whether relative or absolute, then you only have to calculate the vertical center. Since you're using jQuery is fairly simple:

// vertical center
var centerPoint = ( $(window).height() - $("#element").outerHeight() )/2;

Finally tween the element to that point. Here's a very simple example:

 

See the Pen CFJri by rhernando (@rhernando) on CodePen

 

Rodrigo.

[neelu]

Thank you all so much for helping me with this query.

 

I will bear in mind the advice you have all provided.

 

@Rodrigo - Your codepen example shows exactly what I want to achieve and I am going to give it a try.

 

Thank you so much! You all saved me I was giving up on this... 

[neelu]

Unfortunately I am still having issues with animating from the bottom.

 

I have included a link to codepen so that you can see my code. 

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

 (for some reason my code doesn't work on codepen not sure if I'm missing something, it works on my site).

 

I tried your suggestion Rodrigo but its not creating the desired effect, because the element stays visible on screen whilst the user is scrolling through the site.

 

I want the element to appear from the bottom as the user is scrolling down the page.

 

I have managed to get the element to animate in from the bottom but it finishes at the top of the scene (i dont want it to do that) and I want it to finish in the middle, because once it's done that I will pin it for a couple of seconds before releasing the pin. 

 

Thanks again. 

[Rodrigo]

Hi,
 
One thing you're missing is that you're not including scroll magic's script. In the JS gear you can add another resource. Here's the link to the one in Jan Paepke's Git page:
 
http://janpaepke.github.io/ScrollMagic/js/jquery.scrollmagic.min.js
 
Also in order to animate DOM element's with GSAP they have to be positioned, whether relative, absolute or fixed. In your code "#parallaxcamera" doesn't have any position whatsoever, so it'll never animate.

#parallaxcamera
{
  position:absolute;
  width:606px;
  left:50%;
} 

(You need to add a margin-left property equal to minus 303px in order to center the element. Unfortunately with all the minus signs the code didn't appear )

 

Unfortunately I can't help you beyond this because my knowledge of Jan's plugin is practically none. I believe you stand a better chance of a solution in scroll magic's repository. My recommendation would be to take another look at the documentation in order to see what could be the issue.

 
Rodrigo.

[neelu]

Thank you to everyone for their help with this question.

 

I managed to get it working in the end!

[Jonathan]

No worries neelu.. Awesome, glad you got it working!