Visual-Q

The waark site appears to use a dom element that is the size of the window and loads all animated elements into it. Just a guess but because the content is the size of the viewport the document does not actually scroll it is likely using an event listener to activate animation using deltaY. See: https://www.w3schools.com/jsref/event_wheel_deltay.asp https://www.sitepoint.com/html5-javascript-mouse-wheel/ https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY With wheel events you can trigger animations with deltaY changes. Setup the container 100% high and wide with overflow hidden then you can place all animation content inside it and show hide and animate it to the deltaY changes.

The codepen runs smoothly enough on my machine. FWIW maybe try removing animation elements on by one and try to find the point at which it is starting to lag, may give you some insight into the problem. Seems odd that it would run fine on a phone and fail on a desktop I would have expected the opposite.

Based on Craig's pen if you wanted to make the shiver a bit more organic you can add some randomness to it like this using invalidate and Carl's idea of passing the value back as a function return. I'd be interested to know if anyone has a suggestion how to do this using modifiers, I ran up against the issue of how would you have the modifiers change the value only on repeat.

Previous discussion about waiting until assets are fully loaded before animation starts. May help if it's a problem with assets loading.

For all things svg follow Craig's advice above. Based on the example you showed, the best approach is probably svg. Depending on the nature of your illustrations, for instance if they are not made up of vector artwork or suitable for creation as vectors, you can also prepare them as pngs with transparency. Typically you'd use Photoshop, but I'm sure there are other software options if you do a little research.

Another example of the same concepts discussed above in this case using jquery.hover with onRepeat.

Great example as always @OSUblake . I was wondering about one aspect of it, let me know if I'm understanding it correctly. if (!requestId){...} is throttling the animation of the tl's playhead to only execute when the browser is ready to paint a new frame so the scroll event listener doesn't fire the function too frequently?

You can also target multiple elements with a tween as well if you want them to share the same animation, giving them a common class or assigning them to an array etc... to create groups of elements.

Looks very promising. I'm on a mac workflow as well so unfortunatley I can' t test drive it right now. Do you have any plans of porting it to OSX?

Yeah that's what I was thinking I wasn't sure if I could put "new TimelineMax({paused:true}" directly in a push parameter but it works. for(i=0;i<slide.length;i++){ if(i>0){TweenLite.set(slide[i],{yPercent:100});}; slideAnimation.push(new TimelineMax({paused:true})); ; } slideAnimation[0] .to(".slide0 h1",2,{xPercent:15,delay:1}); slideAnimation[0].play(); slideAnimation[1] .to(".slide1 h1",2,{xPercent:30}); slideAnimation[2] .to(".slide2 h1",2,{xPercent:45}); slideAnimation[3] .to(".slide3 h1",2,{xPercent:60});

var slide = document.querySelectorAll(".slide"), slideAnimation = []; var slideTL0 = new TimelineMax(); var slideTL1 = new TimelineMax(); var slideTL2 = new TimelineMax(); var slideTL3 = new TimelineMax(); for(i=0;i<slide.length;i++){ slideAnimation.push(slideTL + i);// how to conditionally refrence a variables name, in this cae using i } slideAnimation[2].play(); I'm working on something where I'd like to push some timelines to an array based on having the index position as part of the timelines name. I know that as it is now .push(slideTL + i) just looks for a variable slideTL and tries to add i to it which is obviously wrong but is there a way to do something similar.

If you not comfortable attempting to build this yourself you can also look at fullpage.js https://alvarotrigo.com/fullPage/ It's a pretty good solution for bridging the gap until you are capable of handling this type of thing yourself. On the downside it completely scroll jacks the dom and forces you to work within it's requirements but on the upside it has a fairly robust set of callbacks allowing you to plugin your own animations, and a lot of options.

Great work on the new hero video for the site. The previous one was good but this one is a lot more engaging.

I'm not sure how to dynamically add an onComplete function after the timeline is created but there is likely someone more knowledgeable here who would. You could do it the other way around and put the if statements inside the function you're running to determine what happens in an onComplete.

SVG, Jpg or png would all be fine. jpg probably least processor intensive. GSAP basically animates any type of property you can feed it. It's not actually based on a particular image type like vectors, with the exception of certain plugins such as drawsvg. You can use it with whatever type of image you want, the browser handles the rendering.

If you're comfortable with it @determin1st has basically described the conditional javascript approach. By all means try different things and learn so have a look ar srcset. Looking at your existing using display:none. Lets consider a super simple solution. Add a class to all the imgs in your html like ".animate". Use this as your gsap selector and all instance will be animated but css determines which one will be shown. Not the best approach for highly processor intensive animation but should perform fine for light loads. Or more efficiently put all images inside a parent give the parent size and animate that. For the images use css something to the effect: width:100% ;max-width:100% ;height:auto on the images let @media determine visibility.

How are you using @media to display the correct image? If you're using multiple <img> elements and just controlling display to show or hide then you'd need to create some conditional javascript to help select the right one for gsap based on screen size, or you could let gsap animate all the images, by just adding a common class to each for the selector. Less efficient computationally but if the animation isn't too intensive it's a simple solution. You may want to look at srcset for setting img src on a single element though I think it isn't universally supported without a pollyfill. https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ Another option would be to set the image as a background image then @media would allow you to control the image displayed in the css. In this case the element would have to be given size as it wouldn't take the sizing of the background image on it's own.

If I'm understanding this it uses bootstraps Carousel; 'cycle' is a carousel method that tells the show to run, and the blue slide down is animated by GSAP and needs to be run between carousel slides. I've never used Carousel so this is just an educated guess but I believe one of the major issues is that you are using "cycle" on carousel which just tells it to run probably you should be using .carousel('pause') between slides, then gsap animation and .carousel('next') in your gsap callback functions. I don't have time to try and figure it all out right now but I'll give you a theoretical set of events that might help you figure it out. 1- text appears, 2- first image appears, 3. .carousel('pause') Stops the carousel from cycling through items. 4. gsap animation blue box animated onto screen - onComplete .carousel('next') Cycles to the next item. 5.- gsap animation blue box animated off of screen 6. back to 1 Carousel also provides a couple of callbacks and events that might allow you to insert gsap into the Carousel process instead of the other way around as you are doing it now. My feeling is this might be a better way of handling it. Refer to the documentation. https://getbootstrap.com/docs/4.0/components/carousel/

Sorry I hadn't reread it I was just responding to your post, the new text is better. I agree any good business should try to position themselves to attract the right clients, but they should never say it directly. That would be very damaging to their brand.

I get it, however consider this: Would a freelancer or agency ever include the line "Please don't waste our time" in their messaging. I think you may be unintentionally putting a negative spin on the process that could discourage job postings. I think it is up to the freelancer to suss out a client, that's the nature of the business.

I'll post my suggestions re the message here so as not to pollute the new forum. Under Job posting '...there's a high risk that qualified candidates will assume it isn’t worth their time. Remember, talented GSAP experts are in high demand. Please don’t waste their time.' This perhaps makes gsap devs sound a bit like primma donnas and may be intimidating to some people thinking about posting a job, I would consider softening the message a little. Under Freelancers '...If customers report poor performance or abuse, you’ll be banned.' Sounds a little harsh particularly as it seems to be targeted only at the freelancer suggesting you would arbitrarily take sides in favour of customers. A business relationship that goes sour may not be the developers fault. Issues also may not truly represent abuse or poor performance, sometimes it just doesn't work out but some people can be vindictive about it, so I would be careful about wading into this.

I think it's a good idea, helps developers and businesses looking for them. From a marketing perspective, it could also be beneficial to Greensock. A hub for hiring could generate more awareness and acceptance for the platform. I would make sure you have some sort of messaging attached saying something to the effect that Greensock provides it only as a convenience and doesn't endorse any participants or have any responsibility for transactions. Was this a suggestion the service should be monetized?

I don't think there is any reason to keep it, but based on a bit of testing I did there is a good reason to remove it as the results of an interior vs exterior wrap of tags does produce different results particularly reflow issues in some cases. It's easy enough to account for in a hardcoded site but as @Origine highlights it could be problematic in cms sites where you can't control content.

Fireworks would have been a secondary consideration. Adobe bought Macromedia to get Flash primarily, though that didn't work out so well for them, and Dreamweaver which was more popular than GoLive.

Here's another good solution from Shaun for parallax scrolling. Links tween progress to window scroll position.