Visual-Q

Moderators
  • Content Count

    255
  • Joined

  • Last visited

Community Reputation

365 Leader

About Visual-Q

  • Rank
    Advanced Member

Recent Profile Visitors

1,399 profile views
  1. Yeah I know it didn't solve the initial problem but it did produce an interesting variation with cycle staggering left right out from center as opposed to symmetrically selecting pairs which I thought was kind of cool. Though with testing I note I have to adjust the number you are dividing by if the number of boxes changes.
  2. This sort of does it though the respective lefts and rights of the pairs are staggered, at the very least another option for the effect even thought it's not completely symmetrical. return Math.abs((boxes.length / 2.5) - i) * 0.25; odd even
  3. Visual-Q

    How to create waark.com like scroll ?

    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.
  4. Visual-Q

    First GSAP animation

    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.
  5. Visual-Q

    Shivering animation

    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.
  6. Visual-Q

    Fresh load behaves differently from cached load

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

    Ridiculously simple back to basics question

    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.
  8. Visual-Q

    Stop repeated tween at the end of an iteration

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

    Class for triggering GSAP animations on scroll

    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?
  10. Visual-Q

    treating nested timelines like AE pre-comps

    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.
  11. 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?
  12. Visual-Q

    How to conditionally reference a variable's name?

    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});
  13. 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.
  14. Visual-Q

    How can this scroll reveal effect be reproduced?

    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.
  15. Visual-Q

    Good job on the new hero header

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