Visual-Q

Moderators
  • Content count

    246
  • Joined

  • Last visited

Community Reputation

330 Leader

About Visual-Q

  • Rank
    Advanced Member

Recent Profile Visitors

1,224 profile views
  1. 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.
  2. 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?
  3. 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});
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. Visual-Q

    GSAP Slider, carousel with text animation

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

    paid,jobs,Classifieds,hire ???

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

    paid,jobs,Classifieds,hire ???

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

    paid,jobs,Classifieds,hire ???

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

    paid,jobs,Classifieds,hire ???

    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?