CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
user2059503
user2059503

Reputation: 67

Superscrollorama - Tweens for multiple elements

This shouldn't be too complicated, although I've been hung up on it. I'm using Superscrollorama, a jQuery plugin for animations to occur when the element is scrolled into the center of the browser.

If I want to have two elements that both fade when they reach the middle of the browser in different areas of the page, I need to create two separate tweens in the JavaScript. I can't have one fade element that shares a class being referenced in the script. This is because once the first fade element is hit, it sets off both animations. Here's a snippet of code that won't work how I want it to: 

<!--HTML-->
<h2 class="fade-it">Fade It</h2>
<h2 class="fade-it">Fade It again</h2>

<!--JavaScript-->
var controller = $.superscrollorama();
controller.addTween('.fade-it', TweenMax.from( $('.fade-it'), .5, {css:{opacity: 0}}));

And the jsFiddle. Sorry if I didn't explain it properly, it's a bit difficult to word. The main point of this is to reduce code. Any help would be appreciated!

Upvotes: 1

Views: 700

Answers (2)

Kerri
Kerri

Reputation: 1211

Your answer is right there in your description. You're right: you can't have one fade element that shares a class without both being triggered. Give the two elements separate id's and make create two separate tweens using their id's, not the shared class.

Upvotes: 1

Steven Lu
Steven Lu

Reputation: 43427

Use two separate tweens. That's how it's intended to work.

Upvotes: 0

Related Questions