Jump to content
Search Community

Noob needs help

Frans test

By Frans
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Frans test

Frans

Posted
Posted

Hello, i am an absolute noob with javascript and superscrollorama.

I am trying to fly in a few images when you scroll down the page.

The first images needs to fly-in from the left and the 2nd from the right.

It worked for 1 image but when i try to make other images fly-in non of them work (or only the first one).

 

Please help me!

 

html:

<h2 id="fly-it"><img src="img/image1.png"></h2>
<h2 id="fly-it2"><img src="img/image1.png"></h2>
 
script:
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .5, {css:{right:'1000px'}, ease:Quad.easeInOut}));
 
controller.addTween('#fly-it2', TweenMax.from( $('#fly-it2'), .5, {css:{left:'1000px'}, ease:Quad.easeInOut}));
 
 

 

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi and welcome to the forums.

 

The main problem is that you're animating the right property. In terms of moving DOM elements horizontally is better to stick with the left property, for example if you want something coming from the left side of the screen, you give it a negative left property, and for something coming from the right side a positive left property.

 

Also a couple of hints, the css wrapper is no longer mandatory, the engine checks the vars properties and if it is a css property it sends it to the CSS plugin, and there's no need to use the px  nor pass the values as strings, the if you just add the values as numbers thee CSS plugin assumes  that you mean px; for any other units (%, em, points, etc) you have to pass a string indicating the value and unit just like you're doing already.

 

So your code would look like this:

//This image will come from the left side of the screen
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .5, {left:-1000, ease:Quad.easeInOut}));

//This image will come from the right side of the screen 
controller.addTween('#fly-it2', TweenMax.from( $('#fly-it2'), .5, {left:1000, ease:Quad.easeInOut}));

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites
Frans test

Frans

Posted
  • Author
Posted

 

Thanks for the quick reply Rhernando.

 

But unfortunately it didn't work. I pasted your code but only 1 of the 2 images gets an animation. I tried placing them in different div's or giving them other names but nothing works.

 

Can you please take a look at my code.

 

Thanks,

Frans

 

My html is now:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>SUPERSCROLLORAMA - Simple Demo #1</title>

<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body class="simple-demo" >

<div id="content-wrapper">



<div id="examples-1">
<h2 id="fly-it"><img src="img/image1.png"></h2>
<h2 id="fly-it2"><img src="img/image2.png"></h2>


</div>
</div>






<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
  <script src="js/jquery.superscrollorama.js"></script>
 
<script>


$(document).ready(function() {
var controller = $.superscrollorama();
// individual element tween examples

//This image will come from the left side of the screen
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .5, {left:1000, ease:Quad.easeInOut}));

//This image will come from the right side of the screen 
controller.addTween('#fly-it2', TweenMax.from( $('#fly-it2'), .5, {left:-1000, ease:Quad.easeInOut}));
});
</script>

</body></html> 
Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi Frans,

 

One question, what's the position property value of your elements?. They should have a relative or absolute position.

 

Could you post your CSS markup or set a live sample (fiddle or codepen) in order to get a better look?.

 

Cheers

Rodrigo

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...