Jump to content

Chris Prieto

ShockinglyGreen
  • Content Count

    21
  • Joined

  • Last visited

Community Reputation

8 Newbie

About Chris Prieto

  • Rank
    Member

Profile Information

  • Location
    California
  • Interests
    Banjos, Booze, Cannabis, Code

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Nice! I was looking at your horizontal one actually as I wasn't aware of this vertical one. This thing is a beast and a lil over my head but I shall commence the crashing and burning!
  2. @OSUblake A vertical scroller that starts at 'Step 1' and goes thru however many more 'steps'. Jump links/indicator dots on the side that get an active class per current 'step' being shown. I forked a codepen I found with a cool jquery/gsap based vertical carousel of sorts and was able to tweak it to work like I need but the jquery is throwing me for a loop . I cant figure out what the array index numbers are for. I made what I wanted happen but I could not write it myself as I don't get what it's doing. https://codepen.io/ionz149/pen/BgMvav It is a bit of work (for me) as I would need to remove the jquery that is currently scrolling it, tie the animation to mouse scrolling (via scrollmagic or gsap goodness) and add the ability for the indicator dots to get active class and trigger the animation to show whatever 'step' is clicked. That said after posting this I am continuing to dig thru tutorials I've done and various codepens I have saved to get try and get these going on my own. I feel like I've done a little of all of these things but just not all at once 😕
  3. Thanks Zach! That link is great. I am currently just kicking around ideas and looking for inspiration and will prolly end up back here with some mangled codepens once I get going
  4. Does anybody know of any cool gsap timelines showing the passage of time visually? ie: a company history or a process of some kind, very basic example (https://www.w3schools.com/howto/howto_css_timeline.asp) I apologize for the vague title and generally stupid question but after searching and only finding results relating to actual timeline functionality I figured I would ask in the case that some of you have run across some memorable examples over the years.
  5. I am also a noob but perhaps ScrollMagic to the rescue?
  6. hah I did not know my searches were visible. I was mid replying and was like well lemme see if I can figure this out (nope!). It is much appreciated.
  7. oh man, I feel so dense 😕 Well, thank you! I was well into researching a bunch of things that were not this lol it is literally flickity first and tweens second 🤦‍♂️
  8. After weighing out all the pros and cons of using something pre-made or making my own pure GSAP slider I decided to try and force GSAP and Flickity to work together. I was surprised I got this working at all. The original codepen I forked was morphing SVG shapes so it may not be the prettiest code in the world. Now that I have something working, I am attempting to add an intro animation to build out the slider itself but when I try and tween the buttons/pager dots nothing happens. I suspect it is because they are added on page load via flickity. So I am wondering if there is a way for GSAP to animate stuff that is added when page loads? Hopefully that makes sense.
  9. That is actually using GSAP. If you view the source on the example you will see a TweenMax in there. The title of the example also has a lil GSAP indicator/tag
  10. ignore me, I missed this important nugget while looking thru SVG gotchas:
  11. So I am crashing and burning my way thru this example of svg text being revealed with a mask. While I seem to have the reveal animating good enough it seems my white text being revealed is having the opacity lowered (?) and shows as gray text once masked. Not sure if that is an actual issue or me just missing something obvious. I am new to using SVG for this type of thing so I am curious if this is even the correct way to go about it.
  12. After spending a bit of time crashing and burning with the callbacks and such. I added another section to my example and the preloader stopped glitching. Slowly backing away from this one but just wanted to follow up in the case I am not the only one dealing with this small but annoying hardly existent issue
  13. I don't have the chops to make my own plugin unfortunately but it's good to know that is an option. I realize the post is a bit dated, but something like this (generally speaking)? I will begin to dig into callbacks for the time being, Thanks again!
  14. Thanks @GreenSock! My apologies for delay in reply, I got pulled down the rabbit hole trying to answer my own questions unsuccessfully. I think I am picking up what you are putting down (to an extent). Now that you mention it I recall reading elsewhere around here about using the className in tweens so thank you for the reminder. It seems I also need to get a better grip on the timeline. That said I was able to copy what you did in my text based preloader pen and it worked. But it doesn't seem to help out with the circle svg preloader as it still pauses on the out animation (https://codepen.io/ionz149/full/BeYOrr). If I comment out the className tweens it is smooth however everything relying on those classes stops working (expected) So I am now wondering what is the preferred way to add/remove classes within a timeline like I am trying to do? I tried looking this up but am a bit more confused than when I started
  15. Hello again I have made the pen in question based on this ihatetomatoes article, which transitions from preloader to loaded content smoothly, 10/10 times (https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/) Somewhere along the process of dumbing down my codepen, the preloader animation transitioning from preloader to loaded content (once preloader hits 100%) is no longer smooth and kind of stutters/pauses on the way out. It will actually be smooth 2/10 but most of the time it paused slightly. I was hoping one of you smarter folks could spot something wrong or missing in my attempts. It also happens in a text based one that is more like Petr's example (https://codepen.io/ionz149/full/mYqxPE) so I am fairly certain I am doing something wrong. **The issue is noticeable when pen is fullscreen, harder to see in the embedded smaller pen