Jump to content
Search Community

My Fade tween wont show, Very new!

miccodan test
Moderator Tag

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

I am using The SuperScrollorama plugin, and used the "simple-demo" included with the plug-in (which works fine..) as a template in which I want to fade the given elements. Something identical to the "design process" section of this website www.comradeweb.com if you scroll about halfway down, you will see a cool timeline they have built outlining their design process.

 

Like I said, I used the SimpleDemo included with SuperScrollorama which does work for me has a template for my fading tweens. However when I test my version my images fail to show up, although the images are their which I can tell by the scroll bar being scrollable but just being hidden and not becoming visible on the scroll event.

 

I am very new to this, so its probably something basic. Any help is greatly appreciated, thanks in advance!

 

Here is the SimpleDemo, which I have based mine of off... (this one works)

<!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">
    <style type="text/css">

        #examples-1 {
            position: relative;
        }
        body {
            background-color: #272827;
        }
        #fade-it {
            position: absolute;
            left: 260px;
            top: 33px;
        }
        #1fade-it {
            position: absolute;
            left: 44px;
            top: 180px;
        }
        #2fade-it {
            position: absolute;
            left: 295px;
            top: 415px;
        }

    </style>
</head>
<body class="simple-demo">
	<div id="content-wrapper">

		<div id="examples-1">
            <img alt="img1" id="fade-it" src="img1.png" width="639" height="249" />
            <img alt="img2" id="1fade-it" src="img2.png" width="733" height="313" />
            <img src="img3.png" id="2fade-it">
		</div>

	</div>
	<script type="text/javascript" src="js/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
			controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
            controller.addTween('#fade-it', TweenMax.from( $('#1fade-it'), .5, {css:{opacity: 0}}));
            controller.addTween('#fade-it', TweenMax.from( $('#2fade-it'), .5, {css:{opacity: 0}}));

		});
	</script>

</body></html>

 

And here is my Code, which does not work,

<!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 #2</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">
    <style>
        body { background-color:#000;
        }
        #examples-1 {
            position: relative;
        }
        #fade-it {
            position: absolute;
            left: 260px;
            top: 33px;
        }
        #img2 {
            position: absolute;
            left: 44px;
            top: 180px;
        }
        #img3 {
            position: absolute;
            left: 295px;
            top: 415px;
        }
        #img4 {
            position: absolute;
            left: 235px;
            top: 638px;
        }
        #img5 {
            position: absolute;
            left: 527px;
            top: 1029px;
        }
        #img6 {
            position: absolute;
            left: 127px;
            top: 1190px;
        }
        #img7 {
            position: absolute;
            left: 476px;
            top: 1384px;
        }
        #img8 {
            position: absolute;
            left: 105px;
            top: 1651px;
        }
        #img9 {
            position: absolute;
            left: 133px;
            top: 1860px;
        }
        #img10 {
            position: absolute;
            left: 430px;
            top: 2096px;
        }
        #img11 {
            position: absolute;
            left: 222px;
            top: 2143px;
        }
        #img12 {
            position: absolute;
            left: 469px;
            top: 2419px;
        }
        #img13 {
            position: absolute;
            left: -2px;
            top: 2496px;
        }
        #img14 {
            position: absolute;
            left: 152px;
            top: 2716px;
        }
        #img15 {
            position: absolute;
            left: 20px;
            top: 3026px;
        }
        #img16 {
            position: absolute;
            left: 447px;
            top: 3051px;
        }
        #img17 {
            position: absolute;
            left: 315px;
            top: 3363px;
        }
        #img18 {
            position: absolute;
            left: 279px;
            top: 3539px;
        }
        #img19 {
            position: absolute;
            left: 97px;
            top: 3621px;
        }
        #img20 {
            position: absolute;
            left: -7px;
            top: 3906px;
        }
    </style>
</head>
<body class="simple-demo">
<div id="content-wrapper">

    <div id="examples-1">
        <img alt="img1" id="fade-it" src="img1.png" width="639" height="249" />
        <img alt="img3" id="img3" src="img3.png" />
        <img alt="img4" id="img4" src=img4.png width="544" height="426" />
        <img alt="img7" id="img7" src="img7.png" width="528" height="425" />
        <img alt="img2" id="img2" src="img2.png" width="733" height="313" />
        <img alt="img5" id="img5" src="img5.png" width="420" height="256" />
        <img alt="img6" id="img6" src="img6.png" width="565" height="442" />
        <img alt="img8" id="img8" src="img8.png" width="733" height="238" />
        <img alt="img9" id="img9" src="img9.png" width="563" height="229" />
        <img alt="img10" id="img10" src="img10.png" width="412" height="71" />
        <img alt="img11" id="img11" src="img11.png" width="452" height="388" />
        <img alt="img12" id="img12" src="img12.png" width="371" height="210" />
        <img alt="img13" id="img13" src="img13.png" width="984" height="336" />
        <img alt="img14" id="img14" src="img14.png" width="791" height="342" />
        <img alt="img15" id="img15" src="img15.png" width="652" height="227" />
        <img alt="img16" id="img16" src="img16.png" width="475" height="374" />
        <img alt="img17" id="img17" src="img17.png" width="361" height="187" />
        <img alt="img18" id="img18" src="img18.png" width="457" height="87" />
        <img alt="img19" id="img19" src="img19.png" width="779" height="275" />
        <img alt="img20" id="img20" src="img20.png" width="1139" height="332" />
    </div>

</div>
<script type="text/javascript" src="js/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() {
        // This example adds a duration to the tweens so they are synced to the scroll position

        var controller = $.superscrollorama();

        // amount of scrolling over which the tween takes place (in pixels)
        var scrollDuration = 200;

        // individual element tween examples
        controller.addTween('#fade-it', TweenMax.from( $('#img1'), .5, {css:{opacity: 0}}), scrollDuration);
        controller.addTween('#fade-it', TweenMax.from( $('#img2'), .5, {css:{opacity: 0}}), scrollDuration);
        controller.addTween('#fade-it', TweenMax.from( $('#img3'), .5, {css:{opacity: 0}}), scrollDuration);
        controller.addTween('#fade-it', TweenMax.from( $('#img4'), .5, {css:{opacity: 0}}), scrollDuration);

    });
</script>

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

Hi,

 

Usually we don't dedicate support for third party plugins that runs over GSAP, so it's appreciated when the part of the code that's giving problems is posted (although we always prefer a reduced live sample in jsfiddle or codepen).

 

I copied your code and is working for me, you can see it here:

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

 

Please fork that and adjust it, if necessary, to your scenario or mention if something is not working as expected.

 

By looking at your code I noticed that you added the js files inside the body tag, you better add them in the header tag and the script tag with your code at the bottom of the body tag, like that you'll be sure that every library and plugin will be loaded when the code inside the document.ready() declaration is executed.

<!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 #2</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">
    <style>
        /*STYLE HERE*/
    </style>

    <!-- SCRIPT FILES HERE -->
    <script type="text/javascript" src="js/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>
</head>
<body class="simple-demo">
<div id="content-wrapper">

    <div id="examples-1">
        <!--  -->
    </div>

</div>
<!-- FINALLY YOUR SCRIPT HERE -->
<script>
    $(document).ready(function() {
        // This example adds a duration to the tweens so they are synced to the scroll position

        var controller = $.superscrollorama();

        // amount of scrolling over which the tween takes place (in pixels)
        var scrollDuration = 200;

        // individual element tween examples
        controller.addTween('#fade-it', TweenMax.from( $('#img1'), .5, {css:{opacity: 0}}), scrollDuration);
        controller.addTween('#fade-it', TweenMax.from( $('#img2'), .5, {css:{opacity: 0}}), scrollDuration);
        controller.addTween('#fade-it', TweenMax.from( $('#img3'), .5, {css:{opacity: 0}}), scrollDuration);
        controller.addTween('#fade-it', TweenMax.from( $('#img4'), .5, {css:{opacity: 0}}), scrollDuration);

    });
</script>

</body>
</html>

Perhaps this solves the issue.

 

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
  • Recently Browsing   0 members

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