miccodan

January 1, 2014

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>

December 22, 2013

Thanks a bunch, It works awesome!

Hello and Welcome to the GreenSock forums.

In order to do a positional change (top / left) the element that is being tweened must have its position set in the css (most commonly absolute or relative) as shown here:

See the Pen dgmia by GreenSock (@GreenSock) on CodePen

you should do:
#test-1{
 position:relative;
}
let us know if that helps.

hello.. Carl beat me to it..

also looks like in your code above that your including the script CSSPlugin.js.. so since you are including TweenMax.js script, you dont need to include CSSPlugin.js ..

TweenMax includes all the goodies.. TweenLite, TimelineLite, TimelineMax, CSSPlugin, and much more for convenience.

http://api.greensock.com/js/com/greensock/TweenMax.html

December 21, 2013

<!DOCTYPE html>
<html>
<head>
    <title>tween-test</title>
    <meta charset="utf-8" content="text/html">
    <script src="js/video.js" type="text/javascript"></script>
    <script src="js/TweenMax.js" type="text/javascript"></script>
    <script src="js/jquery.gsap.js" type="text/javascript"></script>
    <script src="js/CSSPlugin.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
 body
 {
     background-image:url('images/bg_main.jpg');
 }
</style>

<p>
<span id="test-1">C</span> <span id="test-2">O</span> <span id="test-3">T</span> <span id="test-4">Y</span>
</p>
<script type="text/javascript">
    $(function(){
       var testing;
        testing = $("#test-1");
        TweenMax.from(testing, 4,{css:{
            top:"-300px"
        }});

    });
</script>
</body>
</html>

I am VERY new, so it is probably something really basic, but I can not figure it out for the life of me. Thanks in advance.

Notifications

Messages

miccodan

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by miccodan

My Fade tween wont show, Very new!

Can someone kindly assist me with why my code wont work.

Can someone kindly assist me with why my code wont work.