ScrollMagic - always animate first item first
0
Is there a way to ensure that the first item that appears always scrolls in first - using this code? At the moment it fires depending on the order of the elements. I am asking because the order of the elements changes throughout the site - I would rather not create a new scene for every different scenario. Someone might see a clever way of doing this. Thanks for any help in advance.
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
h2 = $(elem).find('h2');
h3 = $(elem).find('h3');
btn = $(elem).find('.btn');
p = $(elem).find('p');
img = $(elem).find('img');
span = $(elem).find('span.js-fade-order');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.fromTo(span, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.3, "start")
.fromTo(h2, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
.fromTo(img, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.9, "start")
.fromTo(h3, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.2, "start")
.fromTo(p, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.5, "start")
.fromTo(btn, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.8, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
gsap scrollmagic
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
add a comment |
0
Is there a way to ensure that the first item that appears always scrolls in first - using this code? At the moment it fires depending on the order of the elements. I am asking because the order of the elements changes throughout the site - I would rather not create a new scene for every different scenario. Someone might see a clever way of doing this. Thanks for any help in advance.
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
h2 = $(elem).find('h2');
h3 = $(elem).find('h3');
btn = $(elem).find('.btn');
p = $(elem).find('p');
img = $(elem).find('img');
span = $(elem).find('span.js-fade-order');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.fromTo(span, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.3, "start")
.fromTo(h2, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
.fromTo(img, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.9, "start")
.fromTo(h3, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.2, "start")
.fromTo(p, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.5, "start")
.fromTo(btn, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.8, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
gsap scrollmagic
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
1
sorry - I worked this out
– Adam Adams
Nov 23 '18 at 11:26
add a comment |
0
0
0
Is there a way to ensure that the first item that appears always scrolls in first - using this code? At the moment it fires depending on the order of the elements. I am asking because the order of the elements changes throughout the site - I would rather not create a new scene for every different scenario. Someone might see a clever way of doing this. Thanks for any help in advance.
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
h2 = $(elem).find('h2');
h3 = $(elem).find('h3');
btn = $(elem).find('.btn');
p = $(elem).find('p');
img = $(elem).find('img');
span = $(elem).find('span.js-fade-order');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.fromTo(span, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.3, "start")
.fromTo(h2, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
.fromTo(img, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.9, "start")
.fromTo(h3, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.2, "start")
.fromTo(p, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.5, "start")
.fromTo(btn, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.8, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
gsap scrollmagic
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
Is there a way to ensure that the first item that appears always scrolls in first - using this code? At the moment it fires depending on the order of the elements. I am asking because the order of the elements changes throughout the site - I would rather not create a new scene for every different scenario. Someone might see a clever way of doing this. Thanks for any help in advance.
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
h2 = $(elem).find('h2');
h3 = $(elem).find('h3');
btn = $(elem).find('.btn');
p = $(elem).find('p');
img = $(elem).find('img');
span = $(elem).find('span.js-fade-order');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.fromTo(span, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.3, "start")
.fromTo(h2, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
.fromTo(img, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.9, "start")
.fromTo(h3, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.2, "start")
.fromTo(p, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.5, "start")
.fromTo(btn, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 1.8, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
gsap scrollmagic
gsap scrollmagic
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
asked Nov 23 '18 at 11:13
Adam AdamsAdam Adams
82
82
1
sorry - I worked this out
– Adam Adams
Nov 23 '18 at 11:26
add a comment |
1
sorry - I worked this out
– Adam Adams
Nov 23 '18 at 11:26
1
1
sorry - I worked this out
– Adam Adams
Nov 23 '18 at 11:26
sorry - I worked this out
– Adam Adams
Nov 23 '18 at 11:26
add a comment |
1 Answer
1
active
oldest
votes
0
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.staggerFromTo(fadeElem, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445639%2fscrollmagic-always-animate-first-item-first%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.staggerFromTo(fadeElem, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
add a comment |
0
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.staggerFromTo(fadeElem, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
add a comment |
0
0
0
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.staggerFromTo(fadeElem, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
$('.data-scrollIn').each(function(index, elem) {
// Init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create Animations
fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');
var tl = new TimelineMax({
pause: true
});
tl.add("start") // add timeline label
.staggerFromTo(fadeElem, 0.6, {
opacity: 0,
y: "40px",
}, {
opacity: 1,
y: "0",
ease: Power0.easeInOut
}, 0.6, "start")
// Create the Scene and trigger when visible
var sceneFade = new ScrollMagic.Scene({
triggerElement: elem,
offset: -100 /* offset the trigger Npx below scene's top */
})
.setTween(tl)
.addTo(controller);
});
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
answered Nov 23 '18 at 11:27
Adam AdamsAdam Adams
82
82
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445639%2fscrollmagic-always-animate-first-item-first%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
sorry - I worked this out
– Adam Adams
Nov 23 '18 at 11:26