Jump to content

Chris Prieto

ShockinglyGreen
  • Content Count

    9
  • Joined

  • Last visited

Community Reputation

3 Newbie

About Chris Prieto

  • Rank
    Newbie

Profile Information

  • Location
    California
  • Interests
    Banjos, Booze, Cannabis, Code
  1. 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!
  2. 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
  3. 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
  4. Oh nice! Thanks so much @Dipscom and @Visual-Q. It never once occurred to me that the scrollmagic and timelines can be separated like that. I recently had an issue that was more than likely related to this as well. I also forgot all about the clearProps which to be honest I've only used once or twice in tutorials. Deff helps to see both approaches.
  5. Thanks for taking a peek! I'm still getting my grips on Code Pen so when I first posted this pen it was actually just the tweens/timelines defined in each media query. When I changed it to how it is now I overwrote that and it is now behaving a bit better however as you noted the autoAlphas are getting stuck. While I have no way of proving it to be true I too share the hunch that the scenes are fighting each other. I tried it with just one media query and both sections in each breakpoint, yields identical results (https://codepen.io/ionz149/pen/wbgGJN) I also tried one using not using the Media Query Watcher, which seems to be working (https://codepen.io/ionz149/pen/ZNLbmo) So at least I know it is possible and it seems it is more than likely something I am doing wrong with the media query watchers/scrollmagic. However I am still very interested in knowing how to set this up the correctly using the media query watcher.
  6. Hah! Totally understandable and I did mention that in my post but figured it was worth a shot since I learned about the MediaQueryWatcher stuffs here. Kind of hoping I was doing something obviously wrong. Anyways thanks for bothering to look I could be going about it all wrong but I am trying to come up with a reliable approach to manage separate animations of same elements for desktop and mobile devices. Expected behavior would be: screens wider than 640: blue section has text coming in from sides, orange section has text coming from bottom screens 640 or less: blue section has text coming in from bottom, orange section has text coming in from sides Which is kiiiind of working at first glance. The issue is if I resize while blue section is on screen when I scroll down to the orange section it will be blank. Doesn't always happen the first time. Resizing it a few times will eventually leave both sections blank, or just the image will show, some times the image and title. It is rather consistently inconsistent and doesn't error out in the console for me.
  7. So I tried really hard to not start another thread about responsive tweening but that is ultimately where I started. With the help of Blake's codepen's I think I wrapped my noodle around it to an extent by forking his MediaQueryWatcher codepen's (https://codepen.io/ionz149/pen/VOaBZv, https://codepen.io/ionz149/pen/VOaBZv). Since those worked I thought I would take a stab at integrating it with ScrollMagic to see if it would work. I got it working in first ScrollMagic scene but once I added the second MediaWatcher to the second scene only the second one works and the first one stopped working. I am sort of muddling my way thru this so I might be going about it all wrong but also kind of hoping it is something stupid being overlooked due to my lack of javascript expertise. I also realize this is not a ScrollMagic support forum but I figured somebody might be able to point me in the right direction.
  8. Yes! Thank you Carl, that totally was it! My apologies as I meant to paste HTML and forgot to do it. I also tried to set up a codepen when I submitted and got the notice but I was not able to get it working. But thank you for the quick fix and I will work on trying to wrap my mind around codepen for future issues I may encounter.
  9. I've made it plenty far using GreenSock with my limited js/jquery knowledge so it's been a fun and fulfilling learning experience. In my search for a solution I found a post on here that got me this far but I fear I am missing something 😕 That said I find myself struggling with what I hope is something simple for a more knowledgable GreenSocker. The loop I am stuck on is below. My hope is to split the text on '.services-wrap li p' which i was previously adding to timeline with 'element.children[4]' but once I tried to split that text things got a lil complicated. I confirmed that SplitText works outside the loop so I am convinced I am doing something wrong even tho the variables make sense to me. var $serviceWrap = $('.services-wrap li'); $serviceWrap.each(function(i, element){ var serviceBTl = new TimelineMax({delay:i*.2}), servicePSplit = $(this).find('.services-wrap li p'), serviceSplit = new SplitText(servicePSplit, {type:"lines"}), serviceChars = serviceSplit.lines; serviceBTl .from(element.children[0], .2, {autoAlpha:0}) .from(element.children[2], .2, {autoAlpha:0, y: '50%'}) .from(element.children[3], .2, {x: '-110%'}) .staggerFrom(serviceChars, 1, {y:'50px', autoAlpha:0, ease:Power3.easeOut}, 0.1) ; serviceTl.add(serviceBTl, 1); });