GSAP TimelineMax simultaneous and triggered/delayed tweens with pin element - Scrollmagic
I'm using Scrollmagic and GSAP to animate a pinned scene that has different desired effects:
- Scroll background images in different directions (Run multiple tweens simultaneously in a pinned element)
- Have quotes animate from 0 opacity to 1 opacity (Run independent tweens in this same scene within the same duration)
I am using GSAP's fromTo
to provide a smooth tween on the scroll for the background images and that part is working just fine. Each fromTo
has the position parameter attribute set to 0
so they run simultaneously:
var slideAnimation = new TimelineMax()
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0); 0);
It moves the background images upon scroll and achieves the desired effect:
https://codepen.io/rcneil/pen/Mzjjma
The problem comes in when I am looking to have an overlay of text fade in and out and run this independent of the background image animation. I am confused as to whether I should use to
or stagger
or what to set this up. I have tried adding these to the timeline with the position attribute set to a time, rather than 0
to be simultaneous:
.to(".quote1", 1, autoAlpha: 0, autoAlpha: 1, '.5s')
.to(".quote1", 1, autoAlpha: 1, autoAlpha: 0, '1.0s')
.to(".quote2", 1, autoAlpha: 0, autoAlpha: 1, '1.5s')
.to(".quote2", 1, autoAlpha: 1, autoAlpha: 0, '2s')
.to(".quote3", 1, autoAlpha: 0, autoAlpha: 1, '2.5s')
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0);
but it doesn't seem to have any affect. They all seem to fire at the same time anyway:
https://codepen.io/rcneil/pen/xQEEyP
Am I approaching this wrong? Can you not have these on the same timeline, and if not, how would you go about animating different "scenes" on the same pinned element?
jquery gsap scrollmagic
add a comment |
I'm using Scrollmagic and GSAP to animate a pinned scene that has different desired effects:
- Scroll background images in different directions (Run multiple tweens simultaneously in a pinned element)
- Have quotes animate from 0 opacity to 1 opacity (Run independent tweens in this same scene within the same duration)
I am using GSAP's fromTo
to provide a smooth tween on the scroll for the background images and that part is working just fine. Each fromTo
has the position parameter attribute set to 0
so they run simultaneously:
var slideAnimation = new TimelineMax()
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0); 0);
It moves the background images upon scroll and achieves the desired effect:
https://codepen.io/rcneil/pen/Mzjjma
The problem comes in when I am looking to have an overlay of text fade in and out and run this independent of the background image animation. I am confused as to whether I should use to
or stagger
or what to set this up. I have tried adding these to the timeline with the position attribute set to a time, rather than 0
to be simultaneous:
.to(".quote1", 1, autoAlpha: 0, autoAlpha: 1, '.5s')
.to(".quote1", 1, autoAlpha: 1, autoAlpha: 0, '1.0s')
.to(".quote2", 1, autoAlpha: 0, autoAlpha: 1, '1.5s')
.to(".quote2", 1, autoAlpha: 1, autoAlpha: 0, '2s')
.to(".quote3", 1, autoAlpha: 0, autoAlpha: 1, '2.5s')
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0);
but it doesn't seem to have any affect. They all seem to fire at the same time anyway:
https://codepen.io/rcneil/pen/xQEEyP
Am I approaching this wrong? Can you not have these on the same timeline, and if not, how would you go about animating different "scenes" on the same pinned element?
jquery gsap scrollmagic
add a comment |
I'm using Scrollmagic and GSAP to animate a pinned scene that has different desired effects:
- Scroll background images in different directions (Run multiple tweens simultaneously in a pinned element)
- Have quotes animate from 0 opacity to 1 opacity (Run independent tweens in this same scene within the same duration)
I am using GSAP's fromTo
to provide a smooth tween on the scroll for the background images and that part is working just fine. Each fromTo
has the position parameter attribute set to 0
so they run simultaneously:
var slideAnimation = new TimelineMax()
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0); 0);
It moves the background images upon scroll and achieves the desired effect:
https://codepen.io/rcneil/pen/Mzjjma
The problem comes in when I am looking to have an overlay of text fade in and out and run this independent of the background image animation. I am confused as to whether I should use to
or stagger
or what to set this up. I have tried adding these to the timeline with the position attribute set to a time, rather than 0
to be simultaneous:
.to(".quote1", 1, autoAlpha: 0, autoAlpha: 1, '.5s')
.to(".quote1", 1, autoAlpha: 1, autoAlpha: 0, '1.0s')
.to(".quote2", 1, autoAlpha: 0, autoAlpha: 1, '1.5s')
.to(".quote2", 1, autoAlpha: 1, autoAlpha: 0, '2s')
.to(".quote3", 1, autoAlpha: 0, autoAlpha: 1, '2.5s')
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0);
but it doesn't seem to have any affect. They all seem to fire at the same time anyway:
https://codepen.io/rcneil/pen/xQEEyP
Am I approaching this wrong? Can you not have these on the same timeline, and if not, how would you go about animating different "scenes" on the same pinned element?
jquery gsap scrollmagic
I'm using Scrollmagic and GSAP to animate a pinned scene that has different desired effects:
- Scroll background images in different directions (Run multiple tweens simultaneously in a pinned element)
- Have quotes animate from 0 opacity to 1 opacity (Run independent tweens in this same scene within the same duration)
I am using GSAP's fromTo
to provide a smooth tween on the scroll for the background images and that part is working just fine. Each fromTo
has the position parameter attribute set to 0
so they run simultaneously:
var slideAnimation = new TimelineMax()
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0); 0);
It moves the background images upon scroll and achieves the desired effect:
https://codepen.io/rcneil/pen/Mzjjma
The problem comes in when I am looking to have an overlay of text fade in and out and run this independent of the background image animation. I am confused as to whether I should use to
or stagger
or what to set this up. I have tried adding these to the timeline with the position attribute set to a time, rather than 0
to be simultaneous:
.to(".quote1", 1, autoAlpha: 0, autoAlpha: 1, '.5s')
.to(".quote1", 1, autoAlpha: 1, autoAlpha: 0, '1.0s')
.to(".quote2", 1, autoAlpha: 0, autoAlpha: 1, '1.5s')
.to(".quote2", 1, autoAlpha: 1, autoAlpha: 0, '2s')
.to(".quote3", 1, autoAlpha: 0, autoAlpha: 1, '2.5s')
.fromTo(".frame.frame2", 1, y: "0%", y: "300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame1", 1, y: "0%", y: "-300%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame4", 1, y: "-100%", y: "200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame3", 1, y: "100%", y: "-200%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame6", 1, y: "-200%", y: "100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame5", 1, y: "200%", y: "-100%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame8", 1, y: "-300%", y: "0%", ease: Linear.easeNone, 0)
.fromTo(".frame.frame7", 1, y: "300%", y: "0%", ease: Linear.easeNone, 0);
but it doesn't seem to have any affect. They all seem to fire at the same time anyway:
https://codepen.io/rcneil/pen/xQEEyP
Am I approaching this wrong? Can you not have these on the same timeline, and if not, how would you go about animating different "scenes" on the same pinned element?
jquery gsap scrollmagic
jquery gsap scrollmagic
asked Nov 11 '18 at 1:52
RCNeilRCNeil
5,178103058
5,178103058
add a comment |
add a comment |
0
active
oldest
votes
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
);
);
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%2f53245171%2fgsap-timelinemax-simultaneous-and-triggered-delayed-tweens-with-pin-element-sc%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53245171%2fgsap-timelinemax-simultaneous-and-triggered-delayed-tweens-with-pin-element-sc%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