Jump to content
Search Community

Search the Community

Showing results for tags 'rotatey'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

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 6 results

  1. Hello there, I am fairly new here and would greatly appreciate any help with this issue. I came across this amazing carousel and tried to implement it in my Nuxt project. ( Sample provided in the end ) The same code works on my CodePen but not in my Nuxt project. Here is the code from my CodePen : https://codepen.io/chaowen/pen/GRzrYqB?editors=0011 I also replicated the code in CodeSandbox, which you can find here : https://codesandbox.io/p/sandbox/test-3d-carousel-gsap-26jqsl?file=%2Fpages%2Findex.vue%3A20%2C9 Upon investigation, I realized that the code is not functioning as expected in Nuxt. rotateY: (i) => i * -36 Full code here : let xPos = 0 gsap .timeline() .set('.ring', { rotationY: 180, cursor: 'grab' }) //set initial rotationY so the parallax jump happens off screen .set('.img', { // apply transform rotations to each image rotateY: (i) => i * -36, // !!HERE!! this NOT wokring transformOrigin: '50% 50% 500px', z: -500, backgroundImage: (i) => 'url(https://picsum.photos/id/' + (i + 32) + '/600/400/)', backgroundPosition: (i) => getBgPos(i), backfaceVisibility: 'hidden', }) Any suggestions to resolve this issue? Your help would be greatly appreciated. Thanks a lot.
  2. Hello guys, I was working on some animation for my client and I found the issue with rotateY which I'm unable to implement. Can you guys please check and let me know if there is any solution to this? I've checked few forum topics and did see the solution below shared by you guys. It suggests to use scaleX but element is not a symmetrical element so I need it actually be flipped and I don't think I can use it as a separate SVG as well. By the way storyline is as follow (store guy filling crate to a van): store guy goes near the van crate is left there (hide crate) store guy come back to the crate laying outside the store picks another crate repeat until there is no crate So can you guys please check and let me know if there is any solution to this? Thank you for checking in. Abi Rana
  3. Hello, I have a problem not related to GSAP, I don't find any solution, I asked on 3 forums (+stackoverflow) and didn't find any answer. I already used GSAP on my webpage for a small animation and I was wondering if it could help me with this problem or if it would be overkill to use GSAP (performance/ressources). I tried to document my problem on stackoverflow (if someone want to read more details) : https://stackoverflow.com/questions/57784926/why-using-opacity-or-an-absolute-position-ruin-my-transform-rotatey180deg I made a card that can rotate on Y when it's mouse hovered (everything with CSS). the problem is that when I use css to change the opacity (svg flag) or the position of an element (text in my situation) on the back of the card, the rotate animation is buggy and got a delay of +/-1sec to display the back of the card. /!\ the bug occur only once, the first time the rotateY is used; to do it again, you need to reload the page (F5). The bug only apear in Chrome (work perfectly on firefox). If I use GSAP to do the rotation instead of css, should it fix the problem or is the problem from chrome and would still be here with GSAP ? (what would be more logic using GSAP for the rotation on Y or for opacity/text position?) I made a codepen with the problem : https://codepen.io/Demky/pen/pozWZKM -> if you remove the css classes .bottom-right and .changeOpacity there is no more delay. As I said on stackoverflow, if you use the template from w3school and just add an opacity to an element from the back of their card (exemple .flip-card-back), it does the same delay problem so I don't think the error is from my code : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card What would you do in my situation ? I can't believe it's impossible to customise the back of a card that rotate ? I don't really know if I can post my question here but I don't know where to search a solution Let me know if something isn't clear. ---------------------- Edit : looking to test it with gsap to see if it work; found this thread, will try it soon ;
  4. Dear All, I love Gsap and I am working on a website full of animations using Gsap. Gsap is awesome! Recently I ran into a new problem, I am not able to do 3D transform for an <image> element in my SVG I have looked into many threads in here, and this one too: I am not sure what I have missed, but I am quite sure Gsap can do the 3D transform of it. Guys, please help me out. Thank you so much. Wish you All have a wonderful Friday. Cheers, Alex
  5. Hi there , i want to animate an svg rectangle so it flips one time. Back and front have the same color. when i execute this.Timeline.to(square, 4, { fill: "red", rotationY:180} ) it does the fill, but not the rotation what am i doing wrong ?
  6. I first tried using CSS, but when I was informed that it looks buggy on Safari, I tried with Greensock to see if it fixes it. It still has the same issues, but ONLY on Safari. After a bit of research I saw it discussed on StackOverflow as a Safari bug. The bug is: while doing the transition, half of the element seems to transition differently than the other half. It shows a line in the middle, like if the element was made of paper and was bending in half. Is there any way around it? I presented a few animations to the client, but this animation (rotateY) was the unanimous selection. Note: I am somewhat new to Javascript and Greensock. You may notice better ways to do what I did. I wouldn't mind suggestions on improving it, but what I am really after is a solution to the bug/glitch. Thank you for your time.
×
×
  • Create New...