Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

3,210 profile views

mrsam's Achievements

  1. Doh! You're totally correct and your updated example is perfect! Cheers Jack!
  2. Im current pinning a container on top of the viewport. This container contains a lot of text (exceeding) the viewport height. What I want to do is being able to scroll the content to the end while it's pinned. But for some reason content (visible on the right column in the codePen) isn't scrolling - any suggestions on achieving this? let tl = gsap.timeline({ scrollTrigger: { trigger: ".list", scrub: 1, end: "100%", markers: true, pin: true, toggleClass: "is-sticky" } });
  3. Sorry Zach, perhaps im misunderstanding what you're saying. If I scroll super fast past the section (like you mention): and reach the end of the section scroll - then callback onLeave is triggered, right? So regardless of how fast I scroll past that section onLeave is always triggered. So when it is triggered I know my section scrub is done. When my section scroll is done - I want to restart/ or make sure, when you scroll up again then it will be 1,2,3,4,5. Here a "conflict" will happen yes,- since we need to swap/reverse/prepare current visible scrolled 1,2,3,4,5 - into an -> in-visble 1,2,3,45 - that would result in an "on/off flicker" of the text ... Knowing there's a conflict that given moment, I just hide (fade out) the text container when onLeave is triggered -> do the flicker "conflict" swap -> and when scroll back will happen = onEnterBack - noone will ever know there was a conflict Hiding the text container when the swaps happen, is what I am doing in my CodePen already. But tampering with the scrollTrigger/timeline, reversing/restarting as mentioned, this is what im unsure about how to handle
  4. Good thoughtfull catches It could be handled somewhat just like in my CodePen: -> onLeave (top to bot - scroll done) = I hide the container -> and then - Trigger (and prepare) whatever reverse (or similar) swaps needed to play 1,2,3,4,5,6 ->> onEnterBack (bot to top scroll "restart") = I un-hide the container -> Timeline starts playing again. ->>> onLeaveBack (bot to top - scroll done) = I hide the container -> Revert back to initial state ->>>> onEnter - all is normal again
  5. Hi Zach! I just figured the callback functions could be leveraged to somehow trigger and reverse some things. But what and how i've not managed to figure out yet In your "cleaned" version, when you scroll back it does 6,5,4,3,2,1 - whereas I want it to do 1,2,3,4,5,6 again (as it did onEnter)
  6. Yes spot on! What you propose, would I be able to "tie" that to section scrub as it currently works? I have a hard time figuring out how to do that
  7. I have list of text that I fade up from : 0 > 1 - a long the span of my scrub scroll. This is how it works pr. initial setup: (see codepen below) 1. onEnter: (scrolling: top to bottom) text 1, text 2, text 3, text 4, text 5 (fade up) 2. onEnterBack: (scrolling: bottom to top) text 5, text 4, text 3, text 2, text 1 (fade down) My "issues" is that: - when I hit onEnterBack (or perhaps trigger the following on: onLeave), I basically want to restart the animation, so it will be like the flow in point 1 again (onEnter) (= I want to give the same text effect experience as coming from top) - and when I then hit onLeaveBack,- again - then reverse back to "initial" (normal point 1) state Is that possible somehow?
  8. Ok, just seemed that YepNope got deprecated for a reason - that being, other perhaps more viable options are available today, rather than having to load yet another library to check for this
  9. Sorry for reviving this old topic, but question anno 2018: How would you go about loading a local fallback today?
  10. Im currently trying to add tweens created in a .each loop to a paused timeline so that I can initiate that timeline whenever I want. I succeed in adding the tweens to the timeline, but it doesnt seem that the timeline adhere possible delays from the tweens - when playing the timeline it goes veryyyyyyyyyyyyyyy slow. To see my wished tweening without the timeline applied you can go to: http://jsfiddle.net/b3cx28pq/1/ To see my slow timeline go here: http://jsfiddle.net/cgcpwf8z/ Any tips on how I can get the timeline approach working in the pace I want and from adding the tweens within the .each loop? Some code (from the fiddle) attempting with the timeline add: //Timeline var animBlock = new TimelineMax({paused: true}); blockContainer.each(function(index){ var that = $(this); var thisBlock = that.find(".block-item"); var thisBlockPullLeft = thisBlock.hasClass("pull-left"); var thisH3 = $(this).find("h3"); var thisParagraf = that.find("p"); if(thisBlockPullLeft) { animBlock.add(TweenMax.from(thisH3, 0.8, { delay: delayDurationHello, autoAlpha: 0, right:-100, ease:Power2.easeOut, paused: false })); } else { animBlock.add(TweenMax.from(thisH3, 0.8, { delay: delayDurationHello, autoAlpha: 0, left:-100, ease:Power2.easeOut, paused: false })); } animBlock.add(TweenMax.from(thisParagraf, 0.8, { delay: delayDurationParagraf, autoAlpha: 0, top:-25, ease:Power2.easeOut })); delayDurationHello += 0.4; delayDurationParagraf += 0.6; })
  11. Jonathan > Force3D to the rescue! I see significant approved animation now on the up & down animation - for some reason I especially noticed the sluggish animation in chrome if I took and re-sized my browser back and forward in width, then the up & down animation would "struggle". However doing that after force3D - it's still just smooth. So far i've only forced force3D to the elements that I have more animation on - but out of curiosty - is there a way to force force3D: true pr. default so it enables on all tweens?
  12. Hey Jonathan - thanks a lot for contributing! Truly appreciated! There we're some wrong function call in your codepen, so I took you yoyo example, and removed un-necessary functions, which can be seen here: http://codepen.io/mrsgs/pen/hlBoc Also added easeInOut for smoother up/down movement. Taking one function out and re-using the same tween of the element to move up and down would surely seem to improve performance! I'll test it out in my application and see if things improves with the yoyo and repeat -1. I guess the up & down tweening can't even get shorter than that!
  13. Im trying to achieve a smooth repetitive up and down "floating" effect on x amount of elements - each element with it's own id. After a little while of "floating" the up and down tweening seems to get sluggish. (my real test uses 5 x 100kb images that has been preloaded before tweening) Im using one function to define the up tweening and another to define the down tweening and then throw each element back and forth these two functions. Any suggestion on how I can achieve the same effect more efficient and perhaps even in some smarter way without the two functions are very welcome! My bet is there some "bottleneck" there and that I can perhaps do some simple re-usable timeline instead? Follow the Codepen to see the concept of it
  14. Coming from a flash background with doing a lot of flash banners Blur was always a very good friend of mine. I did most of my stuff on the timeline and defining blurX or blurY for my movieclip took only seconds and looked kick-ass. However when it comes to JS/CSS/ in generel im struggling to find something that can mimic this the same way. I've been looking a bit on boxShadow which surely seems to be something I could try and play with. Would boxShadow be the way to go or are there other tools I could look at that would give me a quality'wise good result for doing directional/motion blur? Do anyone know if Greensock plan on revolutionizing us with some cool JS motion blur plugin?
  15. Hi Carl - never got back to you on this one. Thanks for contributing with your throughout description of the "issue", it makes sence to me and your "fix" got my timeline going as intended now - i'd probably never figured that out if you hadn't come a long Again thanks - you're doing some overwhelming quick support here! A good weekend to you sir!