erayner_45092

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.

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

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

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

OSUblake, I am forever in your debt. That's a great piece of advice. Thanks a lot

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

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

Hey PointC, Thanks a lot for your help! A true javascript pro at work. Ill be holding onto this and studying it. Cheers! Eugene

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!

Thought i'd show the Landing page, thanks again for your help! http://storylab-lp.webflow.io/#section3

dude you're awesome. Thanks a lot for this! I appreciate your help. Thanks again

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

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!

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!

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

Answered my own question If you're looking at doing something similar to me then i suggest you follow something similar below: var controller = new ScrollMagic.Controller(); var creatureMoves = TweenMax.to(document.getElementById("creature"), 5, { bezier: { type: "cubic", values: [{ x: 100, y: 250 }, { x: 150, y: 100 }, { x: 300, y: 500 }, { x: 500, y: 400 }], autoRotate: ["x", "y", "rotation", 0, true] }, ease: Power1.easeInOut }); // container pin var startpin = new ScrollMagic.Scene({ duration: 2000 }) .setPin("section#start") .addTo(controller); new ScrollMagic.Scene({ offset: 20, duration: 180 }) .setTween(creatureMoves) .addTo(controller); Essentially, we are setting the start section of a container to 100vh. Then we tell scrollmagic to pin that start container to the top of the screen and don't move for a set duration. Then we create variables for greensock's tweenmax animations. Finally we grab the variables and setTweens to scrollmagic scenes. Hope this helps anyone in similar situations. Cheers!

Hello! I've been looking into creating an effect that I see a lot of modern websites using. Im not sure if im meant to be using scrollmagic or not but it seems like quite a good library to plugin to gsap. Here's an example of the effect that I am trying to create http://lamoulade.com/#!/home The website above displays items on the webpage while you scroll. I am looking at creating something similar. I thought the best place to start was to create a bezier curve, and have it only animate along the curve while I scroll - the only problem is, I have NO idea where to start. Should I be looking at ScrollMagic's 'pinning' of objects and have them set to containers? Not sure. Thanks in advance to anyone that posts any information on this topic. Cheers!

cool, ill look into canvas today thanks!

Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance

Yes that looks good. Do you know how we can have the clouds not all end up at the same position at the same time? ie more of a cloud effect rather than all racing to the same position? Cheers

Hi Mikel, I mean that they should tween indefinitely, but I want them to tween until they are off the page ie the clouds go from 1 side of the screen, to the other side of the screen. Cheers

Hello, Simply trying to have my "clouds" (the red boxes that say cloud) to repeat. Currently, they are repeating, but the animation doesn't end (the cloud doesn't make it to the other side of the screen) There are about 5 different clouds on the page and I want them all to move at varying speeds, and then loop once they can no longer be seen on the page. Any help greatly appreciated. Cheers!

Okay thanks a lot. Ill have a look around. Once I get something working ill come back with my fadein/fadeout question. Have a nice day!

Sorry for the confusion. Please ignore the ajax comment. I just want my button to take user to the next page and I want it to fade in and fade out Cheers

Code isn't working and also looking for a way to do this. I have tried to create a pen but unfortunately I think a Pen wont work for this.. I am trying to get my next 'about.html' page to fade in once navigation has been clicked on 'index.html' It might not be as simple as I was thinking. Might be an Ajax thing? Cheers http://codepen.io/erayner/pen/EmdWEG