Jump to content
GreenSock

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

Douglas

Members
  • Content Count

    13
  • Joined

  • Last visited

Posts posted by Douglas

  1. I need to be able to play through a GSAP timeline, and when it is completed, run a different timeline on ScrollTrigger.

     

    I did this using GSAP and ScrollMagic, and am now converting the site I built to use ScrollTrigger, but this specific requirement I am not sure which feature of ScrollTrigger I might use to make this happen. Tried disable and enable but it didn't seem to work.

     

    Here's the working example of the site I already built and am trying to translate over to ScrollTrigger from ScrollMagic: http://mischiefusa.com/

     

    Thanks!

  2. On 8/18/2020 at 10:08 AM, ZachSaucier said:

    Hey Douglas. This is a good use case for the ScrollToPlugin. In fact, we have a demo doing just this listed in the ScrollTrigger docs

     

    Applied to your situation:

     

     

     

    Hey again @ZachSaucier, I'm actually having a bit of a time implementing this on the site I shared with you yesterday. I have one long timeline that scrolls through the site (horizontal scroll). The sections are all variable width, have parallel techniques applied etc..

     

    I tried implementing as-is from the demo in the hopes that it'd just sorta know where things are, but everything on the page is position: fixed and scrolls in from the right, so maybe it just thinks everything is at the "top" or something. Any insights you might be able to provide given my situation? I can provide more detailed info if there's something specific that might help.

     

    EDIT: I've fiddled some more and I see that I need to move to a certain position in the timeline based on the total timeline compared to the position of the section. Also I have multiple pages and am realizing that maybe the nav in my site hasn't been designed around that being the case, realistically this should be a sub-nav of some manner rather than a site nav.

     

    Apologies again - it's going to be custom and require much finagling. -.-

  3. Hey @ZachSaucier thanks for the quick response. Unfortunately in simplifying my example I didn't provide some technically important info.

     

    I need to be able to do what I describe in between sections that have parallax and other effects. Basically I'd do this in between custom scrolling animations.

     

    That said maybe your proposed solution works anyway, technically. I may simply be having trouble wrapping my head fully around the duration/position concepts. It feels like a bit of a struggle to position the animations among each other in the ways I need to do so.

  4. I'm building a site with horizontal scrolling for the whole site, but have been having a heck of a time doing the whole timeline pretty manually.

     

    I'd LIKE to have just a single foreach() which looks for all the <section>s on the page, and animates them one by one, like I have in this codepen: 

     

    Problem is, as you can see, I'm currently adding them to the timeline one at a time, and using some basic math to say "this section is 60% viewport width, so start the NEXT animation at "-=" + 1.4 (duration of previous "out" animation, + (100 - {%width of previous section}). Issue being that the site is CMS driven and may...

     

    1. Completely lack the "previous" section that I intended (maybe the content manager doesn't put any content into a section, so we don't want to show it)
    2. Be over 100% viewport width

     

    I've had a quick go of it but as you'll see looking at my next codepen, I'm running on fumes here. Here's that attempt: 

    See the Pen eYZBZvM by DouglasGlover (@DouglasGlover) on CodePen

     

    So basically I'd like the first codepen I referenced above, but IDEALLY it'd work with a single foreach, and the sections should be able to be ANY width, or NOT EXIST at all, without breaking the whole timeline.

     

    Any help at all would be appreciated; I'm sure this is possible but I've been working basically nonstop on this site and it's running me ragged, so if anyone at all could provide a nudge in the right direction even that'd be amazing.

    See the Pen gOrwbGV by DouglasGlover (@DouglasGlover) on CodePen

  5. I have a large timeline animation and I need to be able to scroll to positions within it. I'm using ScrollTrigger, and I see that it has this:

    https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll()

     

    But I don't see how I'm supposed to add this to a timeline?

     

    I've used timeline.seek(), but this doesn't update the actual scroll position. 

     

    Any help is greatly appreciated!

    See the Pen poybVzy by DouglasGlover (@DouglasGlover) on CodePen

  6. On 8/13/2020 at 9:25 AM, ZachSaucier said:

    Hey Douglas and welcome to the GreenSock forums.

     

    I'm guessing it's because your end position for the ScrollTrigger is never reached because it's out of bounds of your page's scrolling range. But that's a complete guess given the lack of info/a demo :)  

     

    Making a CodePen demo is not just for our benefit. It's also for your benefit because it forces you to break the problem down and figure out where it's coming from. Most of the time I find that when I do that I figure out what the problem is myself!

     

    Hey, thanks for the response, and sorry for the delay getting back. Here's a demo:

     

    See the Pen VwajXNd by DouglasGlover (@DouglasGlover) on CodePen

     

    Like I say, I may simply be doing something totally wrong here, but it just doesn't finish the timeline, even with this very simple demo. Ideas?

  7. Little extra info as I play with it, trying to resolve:

     

    It seems that the whole timeline will scrub through, MINUS whatever my last animation added to the timeline is. I THINK it might be that the final section/div is coming on-screen and triggering the end that way maybe? I can add as many animations to the timeline as I want and it extends as long as is needed, except for whatever is the last animation. 

     

    For now I've forced it to play nice by adding an empty div which is 100% width and having THAT be the last thing animated. This makes the actual last animation run just fine, and I'm only "missing out" now on the invisible div. Definitely not ideal, especially since I have a progress bar on the site and that's not accurate at the moment because of this, but the page "works".

  8. Hi! Hoping to get a hand if possible, realizing of course that sans a codepen URL the first thing you'll likely say is "Codepen example please". So please bear with me as it's 2am so I'm going to describe my issue as best I can since building it out in Codepen would take a while.

     

    Long story short, I've built an animation and it works fine just playing the timeline, no ScrollTrigger involved. However when I add ST, it for some reason doesn't play all the way through. Logging to the console the ScrollTrigger's "self" onUpdate reveals that it always stop at the same "progress": 0.9283...

     

    Basically all I'm trying to do is create a site with horizontal scroll based on gsap animating everything in from the right offscreen, using xPercent from +100 to -100.

     

    I'll drop some code in here and maybe hopefully someone can go "Oh yeah you're using THIS thing wrong!".

     

    Timeline init:

    let tl = gsap.timeline({
            scrollTrigger: {
                trigger: "main",
                pin: true,
                scrub: 1,
                start: 0,
                end: "+=" + 10000,
                onUpdate: (self) => console.log(self),
            },
            defaults: { ease: "none", duration: 1 }
        });

     

    Some sample animations in the timeline:

    // Animate out the landing page
        const landingSection = gsap.utils.toArray("#landing");
        tl.to(
            landingSection,
            {
                opacity: 0,
                duration: 0
            },
            10
        );
    // Animate in the case studies
        const caseStudySections = gsap.utils.toArray(".case-study");
        caseStudySections.forEach(function(e, i) {
            tl.fromTo(
                e,
                {
                    "clip-path": "inset(0 0 0 " + (100 - caseStudySections.length * 10 + i * 10) + "%)",
                },
                {
                    "clip-path": "inset(0 0 0 0%)",
                    duration: 10
                },
                i*20
            );
        });
    const plainFullScreenSection = gsap.utils.toArray("#plainFullScreenSection");
        tl.fromTo(
            plainFullScreenSection,
            {
                xPercent: 100
            },
            {
                xPercent: -100,
                duration: 20
            },
            "-=" + 17
        );

     

×