Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
stoler42

I want to build an interactive comic book that as you scroll animation it triggered

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

Hey everyone, I've new to greensock.js so please be patient. I'm building an interactive comic book. When the uses drags the screen right, panels of art appear and begin to animate. My issue is, I don't know how to control the tweens. The site i'd like to emulate is here:http://disneydigitalbooks.go.com/tron/

I really want to uses to be able to scroll back and fourth like scrubbing to control the tweens. Any suggestions??? Thanks everyone. 

Link to comment
Share on other sites

Hi,

 

The site is quite cool and most definitely could be emulated with GSAP.

 

As far as I know there are two options, the easiest one is using John Polacek's Superscrollorama, a JQuery plugin used to control tweens/timelines via scrolling. There are a lot of amazing sites using it, for more info check here:

http://johnpolacek.github.io/superscrollorama/

John also offers support here:

https://github.com/johnpolacek/superscrollorama

 

The other choice is use a function I created some time ago, is very basic stuff and you have to take care of everything in terms of where your tweens/timelines start and end because is based only in scroll position and not time. You can see it and download the sample code here:

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

 

For another sample you can see this site:

 

http://theartofraw.g-star.com/

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Again, thanks so much for your help. I'm trying to strip scrolorama to work how I need it to. Although I've put isVerical False and I can't get the darn thing to scroll. I'm confused about how the plugin understands when an item is to be tweened which makes it hard to code what I need. I'm just kind of lost at the moment. I'm really trying here to wrap my head around it but I'm having a really hard time.

Link to comment
Share on other sites

Hi,

 

I haven't used scrollorama, but it would help a lot if you could set up a live sample (fiddle or codepen) or upload a zip file with the isolated issue in order to take a look at it.

 

The basic scrollorama syntax is the following:

$(document).ready(function(){
//set the name of the superscrollorama elemenet
var controller = $.superscrollorama({
    isVertical: false
});

//then you add the tweens
controller.addTween(target, 
    TweenMax.from(element, 1, {Vars})
);

});

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

What the heck am I doing wrong? I've copy and pasted and added in elements and I can't get the thing to even move. I know I'm being a pain in the ass but I can't get one thing to work
 
 
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="commic_style.css">
<script type="text/javascript" src="js/dragscroll.js"></script>
<script type="text/javascript" src="minified/TweenMax.min.js"></script>
<!--tweenMax Library -->
<script type="text/javascript" src="js/jquery.jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollorama.js"></script>
<script type="text/javascript" src="js/greensock/TimelineMax.min.js"></script>
</head>
 
<style type="text/css">
#jeff{
width:400px;
height:400px;
background-image:url(images/character-designs.png);
background-repeat:no-repeat;
}
</style>
<body>
<script>
// element that can be used with jQuery
 
$(document).ready(function(){
//set the name of the superscrollorama elemenet
var controller = $.superscrollorama({
    isVertical: false
});
 
//then you add the tweens
var jeff = $("#jeff");
controller.addTween (jeff, 
    TweenMax.to(jeff, 1, {left:600, width:700})
);
 
});
</script>
<div id="navigation_container">
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HOME</a></li>
<li><a href="#">HOME</a></li>
</ul>
</nav>
</div>
<section id="comic_board">
 
<div class="cell"> 
  <section id="jeff"></section>
</div>
</section><!--closes comic board -->
 
 
 
 
 
</body>
</html>
 
 
 
(css)
 
@charset "utf-8";
/* CSS Document */
 
*{
padding:0px;
margin:0px;
cursor:url(images/cursor.png);
}
 
body{
background-color:#CCC;
    width:18000px;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
overflow:hidden;
}
 
#navigation_container{
height:100px;
width:100%;
background-color:#666;
position:fixed;
}
 
nav {
height: 40px;
background-color: #6BB2D2;
z-index: 2000;
position: fixed;
top: 25px;
width: 100%;
margin-bottom:70px;
}
 
nav ul{
margin:0px 0px 0px 20px
}
 
nav ul li{
list-style:none;
display:inline;
}
 
nav ul li a{
color:#FFF;
padding:0px 7px;
line-height:40px;
text-decoration:none;
}
 
#comic_board{
height:100%;
width:100%;
background-color:#999;
margin-top:70px;
}
 
.cell{
width:600px;
height:600px;
margin:auto 40px;
border:solid 4px #000;
background-color:#FFF;
float:left;
}
 
}
 
 

 

Link to comment
Share on other sites

hey scratch that last post, I got something to move!!!! HAHAHAHAHA BUT i didn't control the movement. I'm sending you a zip copy of what I have so far. It's not much BUT i feel like I'm close. With a little bit more help, I know this can work. Thanks for all the help Rod, I appreciate it. 

 

http://cadieuxdesigns.com/scroll_comic/

Link to comment
Share on other sites

Hi,

 

Is working now, good job.

 

But you have some vertical scrolling possibility which triggers the animation, that's' because the comic section height is 100% and has a 70px margin-top, that gives you 70 vertical pixels to drag.

 

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

alright!!! now were cooking with gas, so now all I need is to figure out the syntax for when I scroll backwards, the animation animates backwards. This is so cool Rodrigo!!!!

Link to comment
Share on other sites

Idea clue how to trigger an audio clip as an animation completes?

Link to comment
Share on other sites

Hi,

 

You could use some of the plugins from this article in JQuery4u

http://www.jquery4u.com/media/10-jquery-audio/

 

Or a more straightforward approach like this one in CSS-Tricks:

http://css-tricks.com/play-sound-on-hover/

 

If you chack the demo of the latter, you'll see how simple that way is and how easily would be to replicate it with a GSAP callback.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

 

You can try pac-n-zoom.com and can create this sort of animation within few minutes.

  • 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.
×