Jump to content
Search Community

curtiswiens

Members
  • Posts

    28
  • Joined

  • Last visited

Posts posted by curtiswiens

  1. Wondering if anyone knows of a course out there that covers responsive design for GSAP. After years of using pixel values for ad work I am being asked to start creating animations on responsive sites. I get the basic idea but wondering if anyone has seen this covered in a online course anywhere. I just started going through this lynda.com course https://www.linkedin.com/learning/responsive-layout/go-cross-platform-with-responsive-design?autoplay=true&u=2060004.   Thanks!

  2. I am getting the value of a div x y position thusly:
    let c1x = document.querySelector('#c1').getBoundingClientRect().left      
    let c1y = document.querySelector('#c1').getBoundingClientRect().top

    gsap.from(allcs,{duration:2.8,scale:0,  stagger:{each: 0.1,x: c1x,y: c1y},ease:"quint.out"})

    Is there a way to tween from a stage position rather than the object position? I thought that use to be "" vs no quotes. Basically I am trying to have them all tween from a common x y position. Thanks!

  3. I have a few different tricks. Usually the bulk of the time for me is spent getting all the assets exported. In Photoshop I use file/generate/image assets. From AI it is a bit more challenging. I organize the AI files layers, creating seperate layers for the things that move, and then name the layers and use a script to export all layers using the layer name as the file name.  jsx file is called MultiExporter. I use the CSS panel in Illustrator to position things, this is also a huge timesaver. I use variables in the CSS too to define background sizes etc... So I only have to put the numbers in once. 

    • Like 2
  4. Not sure what I am doing wrong here except for I took too much time off from using GSAP :) I am trying to do something really so simple here. Basically just want the headline and subhead to reveal from the center with the lines. No matter how I set thing up the parent div wants to animate from left to right. Am I just doing this the wrong way, not seeing something obvious or should I be using clip-paths? 

     

    Thanks in advance!

    See the Pen bGrMPaq by cwiens (@cwiens) on CodePen

  5. 4 hours ago, PointC said:

    Hi @curtiswiens :)

     

    Sorry for the delay here. Looks like your thread was missed yesterday. 

     

    I'm not 100% sure I follow the question. Are you saying the gradient in your second demo isn't to your liking? Or are you trying to have the gradient loop around the outside? In answer to your question, you shouldn't need any plugins. I would think just tweening the attributes should get you the desired result. Is there a reason you don't want to animate the x1/x2/y1/y2 attributes?

     

    Happy tweening.

    :)

     

    @PointC

    Just need to work out the math now. Any tips? I just threw some numbers in there for now. 

    See the Pen ExWXwOy?editors=1111 by cwiens (@cwiens) on CodePen

  6. No worries thanks for the response, I had to jump on some other projects, back on this today.

    Yes, essentially what I want to do is have the gradient loop around the outside. So should I be tweening x1 x2... attributes to make this happen?
    I want the gradient to just appear to be looping around the rectangle. 

×
×
  • Create New...