Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
  • Location
    New Zealand
  • Interests
    Front end development, interactivity, animations

Recent Profile Visitors

1,320 profile views

erayner_45092's Achievements


Newbie (1/14)



  1. I just thought it was weird because i've always made basic GIFs on photoshop. And I set them to 'forever loop' and i've never had a problem before. It's weird that my banners have always been forever long and not just 30 seconds.
  2. Hello there, I built my first banners the other day and my company loves them! Small file size, and transitions look a lot better than static transitions. However, Google only let me have an ad that runs for 30 seconds. However, in the past I have had GIF banners (made in photoshop) on an infinite loop -> ie, never ending. adding {repeat:-1} to my timeline will successfully loop the banner, but google won't accept it. I am also looking at 'best practices' if anyone has a link to an article or wants to leave a note here, i'd greatly appreciate that. Thanks! Eugene
  3. Hello there, I'm just trying to make some clean, simple, and reuseable timeline code for some banners. My company has always had me making GIF banners, but I want to show them that html5 banners are so much better Essentially, I just want to have 'breaks' between each stage element. And then if anyone has some ideas for how I can template this that would be great. Thanks! Eugene
  4. Hello there, I've recently been exploring ways to create awesome animations and i've come across the 'canvas' element. Now i've been looking at some articles which explain which frameworks or libraries exist out there to assist in creating animations on canvas. But it's 2017 now - Almost 2018, what is the best framework I can use for the broader use of Canvas? I'd like to create some cool parallax backgrounds, or multilayer which move on scroll, for now anyway. As always, any help greatly appreciated
  5. OSUblake, I am forever in your debt. That's a great piece of advice. Thanks a lot
  6. Hello there, Im trying to make some cool animations but I don't understand why 'onComplete' isn't working. If you click on the header text, it should first fade out the header, and then scroll, and then continue with the animation.. but it doesn't do that. I have it at the end of my Timeline so it should be firing at the end.. or is that not how it works? Thanks
  7. Hi there, Im essentially trying to create some cool rotation effect animations. I have linked my codepen. I want the top box to roll back out another way when you click '.top'. Roll our to the right would be perfect. I'm also trying to reduce my code footprint.. any help as to how I could possibly use more variable or a loop etc would be greatly appreciated. Cheers
  8. Hey PointC, Thanks a lot for your help! A true javascript pro at work. Ill be holding onto this and studying it. Cheers! Eugene
  9. Hi Craig, Sorry for activating this topic again, I was wondering if you could tell me how I can edit the codepen above to display 13 objects instead of 4? I've been trying to make it work, but with no luck. Thanks!
  10. Thought i'd show the Landing page, thanks again for your help! http://storylab-lp.webflow.io/#section3
  11. dude you're awesome. Thanks a lot for this! I appreciate your help. Thanks again
  12. Sorry, that must be confusing. I can barely explain myself sorry! I've made a codepen. best to open on desktop because no media queries Essentially, I want to have the videos outside of the mask to be invisible until they are dragged into the mask. The mask is the square with the red border. and if one of the elements is half way in, then it needs to snap to the mask. Any help greatly appreciated. Cheers
  13. Hi PointC, Thanks for your quick response. This works really well. Thank you! Could you please explain this? {x:this.x/2+"%"} It's a calculation I can't figure out. Also, is there a property I can use that will 'snap to' a container on release? I can use onDragEnd:function() { console.log("drag ended"); } But then how do I go about telling it that I want one of the children of the element that is sliding to 'snap to' a mask? Thanks!
  14. Hi there, My company recently has me working with a software called 'Webflow'. I figured out how to integrate greensock on webflow. here is my code <script> //draggable content Draggable.create("#DraggingArrow", {type:"x,y", edgeResistance:0.65, bounds:".slider-bar", throwProps:false}); </script> Now my question is, how do I go about telling greensock, or the browser, that once #DraggingArrow is at say.. 50% of .slider-bar, do this? See attached screenshot for what I am trying to make Thanks in advance!
  15. Hi there! I am just looking into ways to animate things without using position absolute and left and right properties. with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute? Cheers