Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'TweenMax'.

  • 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

  1. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  2. Hi there! I am just looking into ways to animate things without using position absolute and left and right properties. with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute? Cheers
  3. Guest

    Draw SVG and Dashed line problem

    Hi there, I am new to draw SVG and having problem getting started. Sorry if the solution is simple. I have done tutorials and can't find the answer anywhere. Am I missing something in the attached codepen? I just want the line to draw from the top left to the bottom right. I would also like the line to appear as _ _ _ _ _ _ _ if possible. Thanks so much for any help, Phil
  4. I have simple css animation looks like this, pen circle to square using css I want the same animation using tween max. can someone help me to achieve this??
  5. I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening. And would you please tell me how can I make this slider exactly like this video: https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing
  6. Hi, Does anybody know how to disable rubber-band effect in macOS with using tweenmax smooth scrolling? I know how to disable rubber-band using a simple code, but it doesn't work with smooth scrolling. I think it happens because smooth scrolling using body/html scroll indication. Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect? The simple custom code for disable rubber-band effect: html { height: 100%; width: 100%; overflow: hidden; } body { height: 100%; padd
  7. Hey guys! Im trying to recreate this as an SVG animation using greensock. I got stuck pretty quickly with a diagonal fold (I'm new to 3D). As you can see, I'm about halfway there! But it doesn't fold quite like it should. I need it to fold like it would with paper, across the diagonal line with no flipping. Any ideas?
  8. Hi everyone. I try to do animation for svg elements. Here's what I did - jsfiddle The problem is that svg photos can be different (as small as 100-500 lines of code, or large as thousands of lines). For what we have now, we need to have svg directly in the DOM. And if the svg file consists of several thousand lines of code, the animation will load the system and will not work smoothly (jsfiddle) So I think we need svg, turn it into canvas and then work with it. If they were ordinary primitive figures (circle, triangle, square) and they would meet once on the page, I could draw them in
  9. Hi everyone, I just learned to make animation website and join in greensock. I'm trying to learn to create a website using the exact same background effect as the one implemented on this website, http://thegigi.it/ in this website using a plus sign in the background and follow the direction of the mouse, I've asked in some forums and finally found the answer using tweenmax. Please guide me how can i achieve the same background effect? thankyou.
  10. Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
  11. I aam trying to achieve https://www.brewsandgrooves.com this kind of smoothness with cross browsing really need for my portfolio
  12. I am trying to create a rain effect using TweenMax. I have a solution (see my codepen), but I just wanted to know if there was a better way of achieving this? Any thoughts, feeling or advice would be appreciated.
  13. oOLucOo

    JPG Sequence GSAP

    Hello everyone, I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/ Thanks to @OSUblake. My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens Here is my code: HTML <button class="btn btn1">BOUTON1</button> <button class="btn btn2">BOUTON2</button> <button class="btn btn3">BOUTON3</button>
  14. GreenSock

    TweenMax

    Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal. Howe
  15. Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html.
  16. I'm trying to create a 'sticky' menu that appears after a certain breakpoint and scrolls according to the user scrolling. Basically, when you first start scrolling on the page, the menu should disappear relatively with the page (scroll up normally) but after a breakpoint has been reached, the menu should slide down according to how the user is scrolling. An example of the animation is the menu on the videinfra.com site. The menu translates according to the same number of px that the user scrolls up. I'm currently setting the menu's position to relative before the breakpo
  17. Hi All, I am currently trying to create an animation using gsap libraries for the very first time...For which I have included the gsap external library from preferences in Phpstorm...pfa the screenshot below Its works just fine on Codepen...you can find the link below Is gsap compatible with PhpStorm?...because the syntax is not getting detected in the IDE....and I am stuck halfway..Your help would be greatly appreciated Thanks, Lionel Sirvel
  18. I have a red box as the element to animate. Here is a simple representation of how I want to animate the red box. (attached image) How can I get the result using TweenMax? I have tried this with no luck: const e = document.getElementById('element'); TweenMax.to(e, 1, {left:"20px", ease:Elastic.easeOut, delay:1, yoyo:true, repeat:-1}); As you see the box moves right at first and then starts animating from right to left. I just want to set the anchor point of the movement at the center of the box. so that we can not see the first movement
  19. Feature lists are nice, but they can get lengthy and they don't always tell the story in a way that's relevant to you as the developer or designer in the trenches, trying to get real work done for real clients. You hear plenty about theoretical benefits of CSS animations or some whiz-bang library that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is exceedingly cumbersome or there are frustrating "gotchas". You need things to just work. .expander { cursor: pointer; font-weight: 400; position: relative;
  20. Hello everyone. Sorry for my English. I'm beginer in HTML CSS JS and greensock, a friend ask me to create a small website (one page) for little pizza shop (one employed (just my friend)), the website is just informative, no online pay, of course i mentioned greensock on website. I use the perfect tweenmax on this website And I have a question, i know this question are already asked, but the answer is not clear for me. I answered the form "Not sure which membership to choose? Click here for help." but i don't know if tweenmax is a special animation. If i use tweenmax
  21. Hello! I have a big slider with animations, and it gives a lot of load on the PC P.S. I apologize for the text with errors - I am writing through transliteration (my language is Russian) Question No. 1: How is it in those slides that are not visible to pause the animation, and run only for 4 seconds? Question No. 2: How to put a stop on the entire animation with media <768, and start a new one with media> 768? And is it possible to set the conditions for the media in the animation (I want to make it beautiful on mobile devices .. now we hide it)
  22. Hello everyone, I have been trying to achieve the similar kind of card animation for one of my project. Please click on this link to see card animation effect: http://knowlupus.org/ The way card gets open and close in this game, I want to create exact same effect. I have also attached the codepen link. Is anyone can suggest me how can I achieve this? At least suggest me any resource or idea to achieve this. Your help is much appreciated.
  23. Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance
  24. https://codesandbox.io/s/affectionate-cookies-9hccc?file=/src/App.js It does not work when scroll and works only once
  25. I have created a product list page where every thumb image will have a zoom effect. the zoom effect code is working fine in the pure javascript. but my project is in vuejs and I wanna achieve same effect in my vue component. I already made my component and put some code in vuejs way. but it's not working right way. when I clicked it jumps to top left and then zooming. Here is my sandbox link in vuejs. Maybe I am missing something or there is have a better way to write this pure javascript code to vuejs way. it would be appreciated if any expert takes a look and give me the solution.
×