Jump to content
Search Community

Search the Community

Showing results for tags 'transform-orign'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 3 results

  1. Hi! I want to begin by thanking the developers of GSAP for creating this wonderful tool. I have been using it since 2018. My question is pretty straightforward from the title. An example scenario can be found in the CodePen demo. Basically, when I want to rotate a square by 90 degrees around a point (in the demo, it is (300, 200) in SVG coordinate, as indicated by the blue dot), the transformation matrices needed are first a Translation matrix T_{-1} that offsets the object by -300, -200, then a Rotation matrix R that rotates the object by 90, then the inverse of that first Translation matrix T that brings the object back by offseting it with 300, 200. The final aggragated transformation matrix is then the product of (T)(R)(T_{-1}) By inspecting the final transformation matrix that GSAP sets for the square element via the transform attribute, I am pretty sure this is how GSAP handles rotation around an arbirtrary point, instead of setting the transform-origin attribute. I wonder then how I can access each of the individual T, R, and T_{-1} matricies? If there is not a direct function call to get these, can you point to me where in the source were these matricies computed? Thanks!
  2. Hello good People! I have an issue with (apparently)`transform:rotate()` css in an animation where i use ScrollMagic which uses GSAP 2.x I can't reproduce exactly this on CodePen, yet can't add the 2.x version gsap js. Here is the current dev site: https://legopd22.iwanwilaga.com/ Please check the robot animation on scroll (with orange background) especially on iOS / apple devices. So it breaks on my old iphone6. Other android phone and desktop doing well on any browser i checked. Do you have hints please why this happens? I applied these css but didn't fix it. transform-origin:center!important; transform-box:fill-box!important; Using TweenMax(). and nested timelines function SVG_Vernie_Robot_Anim(){ let ctrl = new ScrollMagic.Controller(); var timeline_robot_inner_elements = new TimelineLite(); var timeline_robot_slide = new TimelineLite(); var timeline_master = new TimelineLite(); var robot = document.querySelector("svg#robot-vernie"); var robot_head = document.querySelector("g#Head_Vernie"); var robot_eyebrow_left = document.querySelector("g#Eyebrow_Left"); var robot_eyebrow_right = document.querySelector("g#Eyebrow_Right"); timeline_robot_slide .add(TweenMax.to(robot, 1, {transform:`translateX(${is_mobile ? 100 : 250}px) translateY(${is_mobile ? 25 : 0}px) rotate(-10deg) scale(1.5)`},0)) .add(TweenMax.to(robot_head, 1, {transform:'rotate(15deg)'},0)) ; timeline_robot_inner_elements .add(TweenMax.to(robot_eyebrow_left, 1, {transform:'rotate(-25deg)'},1)) .add(TweenMax.to(robot_eyebrow_right, 1, {transform:'rotate(25deg)'},1)) ; timeline_master .add(timeline_robot_slide,0) .add(timeline_robot_inner_elements,2) ; new ScrollMagic.Scene({ triggerElement: ".wp-block-getwid-section.szekcio-terkep", duration: 200, //px }) .setTween(timeline_master) .addTo(ctrl); } SVG_Vernie_Robot_Anim(); To me seems the problem is with rotation. Other `translate` properties work ok. Can you reproduce the same issue? Thank you so much! Best, Wiktor
  3. Hi, Noticed something when zooming in (ctrl + +) in browser the transform origin doesn't scale properly. Is this a bug or am I doing something wrong here? thanks! example: http://codepen.io/skorpa/pen/tcnld
×
×
  • Create New...