Jump to content


  • Posts

  • Joined

  • Last visited

About mrsam

Recent Profile Visitors

2,629 profile views

mrsam's Achievements


Newbie (1/14)



  1. 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
  2. Sorry for reviving this old topic, but question anno 2018: How would you go about loading a local fallback today?
  3. 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; })
  4. 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?
  5. 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!
  6. 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
  7. 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?
  8. 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!
  9. Hey all, I'm currently playing with the timeline and setting up a sequence of animations. So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline. My objective is fairly simple, summarized in the following steps. 1. I do some initial CSS tweening 2. I fade up some text 3. I tween my div to the outer right 4. I change up some text 5. ISSUE: I now want to re-position my div to the outer left and tween it into center again. Ive set up an illustrative codepen example here: http://codepen.io/mrsgs/pen/IeLrF Note: uncomment line 15 to see the issue apply
  10. Hi rhernando, Thank you so much for the quick reply! It works perfectly now And also thanks about the engine update note. Would you mind explaining how the infinite scroll works? Is it something like: - Background moves from default.x+y to tweenx+y - Background automatially resets back to default.x+y and repeats the tween ? Not that it matters so much in this simple case, since it will barely be noticeable, but assuming my tween makes the background end in a position where the dots doesnt align 1:1 with the dots from the first start frame, then when the tween ends / resets you would basically be able to see an "out-of-sync" "shake/move" going back to the first default frame? If im assuming correct on this, im wondering how this could be adressed,- if even possible?
  11. Hey all, I currently have a header with some repeating background pattern. What im looking to do is make this repeating background pattern move towards right and bottom from a point of position: absolute; - in the same speed and in an infinite loop. You can see a dummy here - hope it somewhat illustrates what im looking to do: http://codepen.io/anon/pen/oapnB Initially my idea was to have it move in one direction first for like 10secs and then change to another direction - as the codepen illustrates. However lets just keep it simple: - Would anyone be able to tell me if im able to move my background pattern infinite in one direction? Right now I offset the background outside of the screen, so that I have some extra background to actually move around without it ending - im not sure how to adress that for an infinite solution - perhaps some resetting needs to be done? But in that case im not even sure how to do that so it looks in sync.
  12. Hey rhernando, Thanks so much for your response. My sun rays are currently an image sitting in a div. I was thinking to split up the image to 3 separate images and place them each in a div of their own - with the rays split among and then run the clipping property on each image. I was thinking to create the ray lines with pure css and html and then change the reg point to the bottom center of the ray and then rotate / scale it up - but curious to how this could be achieved with an .png image sitting in a div (if possible at all?)
  13. Imagine having a set of light rays surrounding a circle - just like the sun. What I want to do is reveil the rays, so the appear to be "rising" from the sun. In Flash I would be able to create a nice effect for this by doing something like the following steps: - Divide the rays into x amount of groups (symbols) - Create a circle mask that will scale up "grow" to reveil the rays - Run the circle mask with 0.3 delay on each of the x amount of groups I figured that I could emulate something similar with the clipping mask, but that only works with rectangles?