Jump to content
Search Community

Chris Prieto

Members

  • Posts

    68

  • Joined

  • Last visited

 Content Type 

Posts posted by Chris Prieto

    Help w Simple Preloader Animation

    in GSAP

    Posted

    of course haha I was suspicious it was something like that. I initially had a set of dots so it wasn't so obvious it wasn't working exactly as intended.

     

    This is interesting. It does fix the stuck at 100% thing happening on phones tho. So the way you did it, it will at the longest take four seconds (or whatever duration is) and jump up if it finishes earlier?

     

    Your second option sounds better but for the time being I at least have that "preloader" going away as it hits 100%.

     

    I currently have time to bang some code around so if you have ideas on how I could go about getting the preload timeline to utilize actual page progress I can give it a go. I can't conceive how it would work with the duration in place or how I turn the page's progress into something I can stick in the durations place but I'm gonna start digging around and see what I find.

    Help w Simple Preloader Animation

    in GSAP

    Posted

    I wasn't sure wether to start a new thread or continue via comments on this one since they are very much related. So I opted to add comments in the name of keeping things in one place and since it is building from my original pen.

     

    Once I put this out into the wild I noticed it was sticking at 100% on more image/video heavy pages. I added a progress bar and percentage counter to better illustrate the issue (maybe the issue?). From my end the js/tweens makes sense so I assume I am probably doing something wrong.

     

    I was anticipating it would get to a hundred and promptly go away, however I noticed it sticking to 100% on all major browsers I checked in. On the other end of the spectrum if it loads faster it wont always make it to a hundred but that is less important really. My main concern is people on slower connections sitting there staring at a preloader stuck on 100% (currently happening on my phone, I work in a tall building and my signal is particularly crappy up here if I am not on wifi)

     

    Any and all help greatly appreciated.

     

    See the Pen ed63425493ba9f23f8dd31823ebbd85d by ionz149 (@ionz149) on CodePen

    Controlling a svg morph

    in GSAP

    Posted

    In the past I've lucked out and the svg morphs I did were smooth as butter but I cant figure out why my attempt to animate a circle path into a tear-ish type of shape path results in slightly off morph. It seems to twist around by default. I tired messing with shapeIndex, morphIndex, origin, rotational type. I was shooting for the circle to stay a circle and just kinda spout the pointy part.

     

    Is there something I am missing or is it a matter of more tweaks to the shapeIndex, morphIndex, origin or type?

    See the Pen 925584322289111141155ea751b292e1 by ionz149 (@ionz149) on CodePen

    scroll down animate horizontally, scroll up skip horizontal animation

    in GSAP

    Posted

    18 hours ago, ZachSaucier said:

    Good work! It looks like it's because the event is fired at the end of the SVG (before the end of the wrap section is scrolled to). I bet you can fix that.

     

    @ZachSaucier Wow, that is crazy. I had kind of admitted defeat and then your vote of confidence got me all motivated. I made a few attempts to fix it.

     

    First I tried to make the svg height:100% in css, seemed obvious but did not change anything. Then tried to use the svg/wrap div bottom position and basic math to get a different number for the scroll y coordinate, which got pretty close but always left a small jump. I don't really feel this is correct approach.

     

    But after a few hours I can confidently say I have no idea why the event is firing off at end of svg or what I need to do to make fire off at end of wrap instead.

    • Haha 1

    scroll down animate horizontally, scroll up skip horizontal animation

    in GSAP

    Posted

    2 minutes ago, ZachSaucier said:

    Sorry, I don't have time to breakdown exactly what's happening here today. All the different scrolling timelines is a bit much to wrap one's head around :) 

     

    The first parameter is the 0 scroll position, the second is the y. Not sure why you're setting the horizontal scroll position...

     

    ugh, oh well... you would stab your eyeball with a dull pencil if you saw the real code ?

     

    I was setting the scroll position wrong because I am crashing and burning right on thru this thing haha. Adding distance variable to the y position still resulted in jumping. Perhaps it's matter of getting the distance variable to calculate the correct number (which I can totally be doing wrong) and that firing at the correct time ... or not *shrug*

     

    Additionally I recreated using ScrollMagic code instead of doing it in a timeline and ended up with the exact same results so that is promising. I've gotten both the timeline based and scrollmagic based example down to a slight stutter of a jump but it's still noticeable. This might be as good as I can get it but will keep banging my head against it.

     

    gsap timelines: https://codepen.io/ionz149/pen/RwbJmWp

    scrollmagic: https://codepen.io/ionz149/pen/mdbGEwj

    GreenSock loot

    in GSAP

    Posted

    On 9/13/2019 at 7:40 PM, GreenSock said:

    Yep, I believe they are embroidered. 

     

    And FYI, DJM Designs (the outfit providing the apparel) is run by one of my very best friends (he was the best man in my wedding). I tried places like Zazzle and others, but frankly the quality sucked. The shirt looked nice...until I washed it twice and then it fell apart and faded. DJM uses high-quality stuff that has lasted me for years. So yeah, if you want a t-shirt, hat, or whatever, DJM can hook you up. If you run into any problems, let me know and I'll show up at his home and give him a talking-to ;)

    awesome! cap has been ordered ? 

    scroll down animate horizontally, scroll up skip horizontal animation

    in GSAP

    Posted

    On 9/14/2019 at 8:10 AM, ZachSaucier said:

    In your demo it would probably be best to calculate where the top of the last section is on scroll and force the window to scroll to that position when you change the sizing of the other elements.

     

    Thanks for this. I think I get what you are saying and I tried but now it jumps to the process timeline. I added these two vars:
    var bloopEl = document.getElementById('bloop'); ~ I tried changing to footer as well
    var distance = bloopEl.getBoundingClientRect().top; ~ i tried bottom too

     

    and then replaced the zero with the distance var:
    scroll(distance, innerHeight);

     

    See the Pen RwbJmWp by ionz149 (@ionz149) on CodePen

    scroll down animate horizontally, scroll up skip horizontal animation

    in GSAP

    Posted

    Spoke too soon but it's so darn close! I think I butchered your code by moving onComplete from the the last tween of the 'processTl' to the 'bloopTl' after it so that the clearing of props/class adding happens off screen. That seems to cause the page to jump a lil once you are passing the horizontal section.

     

    Your codepen does not jump but the horizontal section('processTl') gets big white gap before its out of view since the props get cleared before it is out of view.

     

    I broke down your function and I get the .destroy() of the scenes/timelines. I get the clearing of props but what I dont get is this guy: 'scroll(0, innerHeight);'

     

    It says its keeping window in place but it seems to only do that in your example haha. I commented it out and the jump was less intense but I feel like I am missing something super obvious to make that jump go away.

    scroll down animate horizontally, scroll up skip horizontal animation

    in GSAP

    Posted

    @ZachSaucier I would tend to agree with you. This approach to the side scrolling effect has always seemed kinda hacky to me but I don't know how else to do it (fart sound)

     

    That said thanks again for your help here Zach. In my learning of javascript I seem to not be thinking globally or big enough. I have this notion that everything has to be super specific to itself but looking at this code it's so straightforward. With your code I was able to get this working in a pretty cool manner:

     

    See the Pen RwbJmWp by ionz149 (@ionz149) on CodePen

    • Like 1

    scroll down animate horizontally, scroll up skip horizontal animation

    in GSAP

    Posted

    Thanks ya'll!

     

    3 hours ago, ZachSaucier said:

    Why not just detect when the user is scrolling upwards and remove the padding-top on .scrollmagic-pin-spacer? 

     

    If you wanted to wait until the user has scrolled through the entire section before cancelling it, put the reverse: false and padding removal in the onComplete for that section.

     

    @ZachSaucier Mostly because I am at best utilizing the Mr. Magoo approach and am blindly wandering thru all the things with accidental results haha

     

    I am on the verge of a cold or something so I am not firing on all cylinders right now so I want to clarify a few things.

     

    1. I tried that and it is not that great but I may have done it wrong: 

    See the Pen PoYaxgw by ionz149 (@ionz149) on CodePen

     I don't see the padding when I scroll up ex anticipated but once I pass the animation and the reverse:false kicks in I end up with the same padding spacing when scrolling down. Kinda of close but I'm not getting how to only allow that padding to show when the animation is active and hasn't been completed.

     

    2. I think this is more what I am after however it is more to wrap the noodle around. I would add the onComplete to the timeline in question. But then how do I use that to control the scene's reverse:false or the padding? 

     

    @mikel The answer might be there but I fear I am too dense to spot it. Are you suggesting I look into destroying the scene?

     

     

    scroll down animate horizontally, scroll up skip horizontal animation

    in GSAP

    Posted

    This might be more scollmagic based but banking on the good graces of someone smarter than me and maybe it will prove useful to someone in the future.

     

    So I was trying to to do this thing where when scrolling down the site moves horizontally when you enter a specific section. But it became cumbersome to scroll back up and have to view the animation in reverse. I set that animation to reverse:false which deff stops the animation when scrolling back up but it is left with a giant inline padding-top. I assume this padding is required to allow space to scroll for the horizontal animation.

     

    all and any insights much appreciated 

    See the Pen xvRxYj by ionz149 (@ionz149) on CodePen

    Using MediaQueryWatcher with ScrollMagic

    in GSAP

    Posted

    the scrollmagic scene reverse:false seems to be the cause of the issue.

     

    Bleh, I know this aint the scrollmagic support group but if anybody has any ideas I'd love to hear em. Gonna try and remove the reverse:false and the duration times to see if I can make do.

    Using MediaQueryWatcher with ScrollMagic

    in GSAP

    Posted

    @ZachSaucier no I deff. meant to post here, was just lazy and reused that pen. This question is all about media query watcher and the code from this thread is in question.

     

    But yes I am having an issue it seems for some reason on my local I cannot get the clear props to work after browser resize. In this thread I was having the same issue and it was fixed by re-working the code, clearing the timelines and setting a clearProps for every object used in the tweens. Kind of at a loss and testing more to see if maybe it is the use of vars in the set tween that clears everything is the issue(?) Will report back if anything

    • Like 1

    Using MediaQueryWatcher with ScrollMagic

    in GSAP

    Posted

    So after messing around with this for a bit I realized that the timelines need to have the same amount/types of tweens. Is that correct? Or am I just implementing it incorrectly?

     

    See the Pen RwbpXpa by ionz149 (@ionz149) on CodePen

     

    if you comment out line #14 (.to('#pre ... it should start working as expected

     

    I just wanna make sure that I *cannot* have two totally different sets of tweens per timeline per breakpoint

    Help w Simple Preloader Animation

    in GSAP

    Posted

    4 minutes ago, ZachSaucier said:

    Hello again, Chris!

     

    I'm guessing here, but I think the biggest issue is that the intro timeline didn't have paused: true so when you .play()ed it, it was already done and didn't play again. That and your timeline tweens should be outside of the window load most likely, if that's what your media loading event fires. 

     

    You could also smoothen out the ending of the preloadTl by using its onRepeat if you'd like:

     

     

    @ZachSaucier I think you nailed it. And all that seems to make a great deal of sense to me.

     

    If I were to add another animation to the area commented as:
    // or another animation or something

     

    would that just be another timeline.play()? ie: somethingTl.play()?

     

    Just wanna make sure Im getting this

1
2
3
Page 1 of 3  
×
×
  • Create New...