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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. ** I seem to have hit the back button when posting this so it has posted twice - feel free to delete the older version** Hi I have a tween where I am scaling a div with a class of .btn, which i'm scaling on its x-axis with scaleX. I also have a hover effect on this button after it has animated in, and on this hover I've put a CSS transition. The CSS transition changes the behaviour of the tween and I've tried a few things to try and overcome this, but I'm getting nowhere. My question therefore is, is there a way to have an element animated with greensock (in this case on pageload) and also allocate a CSS transition to the element for other interactions (i.e. a hover effect) after the animation has finished? GSAP TweenMax.to(".btn-scale", 1, {scaleX:1, delay: 1, ease:Linear.easeNone}); CSS .btn { border-radius: 1px; padding: 1.2rem 2.2rem; letter-spacing: .5px; cursor: pointer; transition: 0.6s; letter-spacing: 1px; background-color: #1D2F42; width: 200px; } /*for greensock*/ .btn-scale { transform-origin: left; transform: scaleX(0); }
  2. Hi , Guys I am new , i am trying to stop tweenlite but css transformMax3d is still there, i am creating a slider like revolution slider editor but i am not able to get how i stop the tween in editor , inline style is still there so if you stop in middle of animation(See the attachment) , element will hang in middle of the page , i am using . clear() , kill() , also try killall but still css there , also try clear prop all but no luck please help me as soon as possible , i am also interested in split text purchase but , stuck in tween ?? please help me
  3. Hi everybody, for now, I'm using the requestAnimationFrame function. Is this way the most optimized way ? It looks like this way use a lot of the browser ressources. Thank you var currentMousePos = { x: 0, y: 0 }, mousePos = { x : 0}, myvar; document.addEventListener("mousemove", function(event){ currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); function raf() { my_raf = requestAnimationFrame(raf); mouse.x = myvar; TweenMax.to(mousePos, 0.3, { x: currentMousePos.x, onUpdate: function () { myvar = mousePos.x; }, ease: Linear.easeNone }); }
  4. openContactAside = () => { this.setState({ asideOpen: true }, () => { TweenMax.to(this.overlayEl, 0.5, { x: '0' }, { ease: Cubic.easeIn, yoyo: true }); }); }; closeContactAside = () => { TweenMax.to(this.overlayEl, 0.5, { x: '100%' }, { ease: Cubic.easeIn, yoyo: true }); }; I have these two functions. When a button is clicked, the overlay element (this.overlayEl) animates from an initial position set by CSS of .overlay { transform: translate3d(100%, 0, 0); } The animation works as desired the first time the button is clicked to open the overlay. The overlay slides out and populates the full width and height of the viewport as desired. The animation to slide the overlay back to its original position works the first time its clicked. The user presses the close button and it slides back to its original position as it should. However, once both the open and close animations have fired once, I try to open the overlay again but nothing happens. I've inspected the dom and its stuck at <div className="overlay" style="transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);" /> I don't see the translate property being animated back to 0% again. It's as if its stuck there. Am I completely missing how TweenMax's to/from methods work? Is there something I have to do to reset or set the positions of an element that's been animated for it to work properly?
  5. Hey Tweeners, I was wondering is it possible to create typing effect for placeholder text without using "SplitText"? If yes how to set textarea placeholder as target in tweenmax function. I have tried but it's showing null target. Anyone can explain why?
  6. I was attempting to use GSAP with Node.js, but I encountered some difficulties i could not manage to solve on my own. I am using the GSAP supplied by NPM (https://www.npmjs.com/package/gsap). I have read the other questions asked on this forum and tried their suggestions (http://greensock.com/forums/topic/7422-using-tweenlite-timelinelite-server-side-with-nodejs/), however, GSAP still throws an error saying that "document" is not defined. Help would be much appreciated
  7. I am trying to make an coverflow slider like used on the HomePage of this website http://www.onedayinmyworld.com/. For reference, I am sharing the codepen demo of my progress and there are a lot of things with which I am struggling. I want to add dragging feature to it with center element highlighted i.e active class added to the center div. Can anyone help in solving this problem?
  8. Hello all, I am newbie and just started to learn GSAP technology in my company. I have asked to create this effect using GSAP. I tried my best to find scrollTop of current message and fail to apply autoAlpha on it. Will you just check both images and can someone tell me how can I create fadein and fadeout effect scrolling up and down. I want to show current message with opacity 1 and last message with 0.5 and last second message 0.25 and so on. And when I scroll down messages opacity should change as per scroll. Please need someone early help to achieve this. Thanks in advance.
  9. Howdy! First of all let me apologize if this is issue has been dealed before, I couldn't find out where Well, this is my trouble: I followed the tutorial in this url, but I can't manage TweenMax and get this error: Uncaught ReferenceError: TweenMax is not defined I load this libraries at the markup's bottom: <script src="jquery-1.9.1.min.js"></script> <script src="TweenLite.min.js"></script> <script src="TweenMax.min.js"></script> <script src="EasePack.min.js"></script> <script src="CSSPlugin.min.js"></script> <script src="main.js"></script> The main.js has this: $(document).ready(function(){ animPieza1(); } function animPieza1(){ var pieza1 = $("#html1_pieza1b"); TweenMax.to(pieza1, 1, {opacity:0, repeat:-1, yoyo:true}); } Any idea? Best!
  10. Hi, So I have a left sidebar with a bunch of Draggable elements that I want to drag over to the right side of the page. The thing is that the left sidebar is scrollable, and when the page height is too small, a scrollbar is shown to be able to see all Draggable elements. The problem with this is that by making the container scrollable, the content is limited to it's container size (Behaves pretty much like a overflow:hidden). Is there any good way to be able to drag an element outside of a scrollable container? So far I could come up with several approaches but none seems to be working fine. 1. Make the container overflow:visible when the user starts dragging the element, but this way the scroll position goes to the top and other UI artifacts may happen. 2. Clone the element to be dragged and put it outside the scrollable element as an absolute position over the parent element. But so far I was unable to perfectly align the cloned element with the parent element, and the move back animation may get to the wrong position if the user scrolls the sidebar while animating. Is there any "good" way to do this? Or any workaround that works in a less buggy way? P.D: The Codepen shows the minimum example where you have a bunch of elements inside of a scrollable area. When you try to drag it out of the scrollable area you will see it gets hidden. Any ideas how to overcome this issue? EDIT: So I finally implemented the method 2, and it seems to be working fine on PC, but there is some bug on mobile devices. It seems that on Mobile the onRelease method is never called from Draggable. This does works properly on PC. I updated the Codepen example. Test in on your PC and it will work. Test it on your phone, you will drag the element, but the element wont ever disappear. Is there any way to fix this or is this a Draggable bug?
  11. Hello ! I'm trying to convert a css animation to a tweenMax one, I really need to convert the following cubicBezier value to tweenMax Bezier plugin but i'm far from the desired output cubic-bezier(.87,.01,.8,1.04) If any convertor hero is in da place I will be really glad ! Thanks,
  12. Just want to say that I've posted the same question on StackOverflow, but figured I would post it here too I'm really into Google's Polymer and I love GSAP - and so far I've been using the two in conjunction without a hitch. Unfortunately I have now hit a problem - how do I use GSAP (TweenMax to be specific) with custom css variables? For example: To change someCssProperty of someElement I would TweenMax.to(someElement, 1, someCssProperty: "value"); but the someCssProperty part becomes an issue when I'm trying to animate a css variable, which take on the form --some-custom-css-variable I have tried to use TweenMax.to(someElement, 1, --some-custom-css-Property: "value"); (obviously gives me errors) and I also tried to use TweenMax.to(someElement, 1, "--some-custom-css-Property": "value"); (quotes around the some-custom-Css-property) - however this results in no change/animation and an invalid tween value error message on the developer console. So the question is: how would I go about animating custom css variables with TweenMax (GSAP)? Thanks for any help EDIT: I have tried using classes through TweenMax.to("SomeElement", 5, {className:"class2"}); But this changed the element style as if I had declared it in css with a SomeElement:hover {} style (as in it does not animate, just changes immediately)
  13. Anya

    Tweening in click

    Hi guys! Hoping to get some help on the current issue. I have a flip card that rotates 180 deg on each click. And depending on what dot a user clicks, the corresponding image is being used for the face of the card. The issue I have is that if a user clicks before the previous tween animation finishes, the rotation value gets added and then card rotates a little more. I would like on each click for the card to make a complete 180 rotation and probably prevent clicks if the card is still animating. How would I go about this? I'm using relative values '+=180' because absolute values were not giving me the result and IE was not cooperating either, only with relative rotation value I got a full effect of a 3d card cross browsers compatible. I have also tried to check if(!tl.isActive()) {} but didn't seem to give me the correct boolean.. Any advice is appreciated! Thank you!
  14. Hi, I'm a beginner with tweenmax and I was playing with basic animations. Instead of doing the animation with "animate" I wanted to try to animate a circle with the yoyo effect, but the animation is not central. Thanks in advance for advice.
  15. Hello, my goal is to do this animation seamless - but i have no idea where i have to add the possible overlap parameters for the repeat. please enlighten me.
  16. Basically, Im trying to get an animation (#dd-heading) to trigger when the user hovers over nav button(.dropdownmenu-button) that triggers dropdown with animation in it.... but it only seems to trigger the first div and the rest dont trigger. Similar to this - https://www.open-wear.com/ //gsap animation of elements in dropdown navigation var toggle=0; var tldropdown = new TimelineMax({paused:true}); var items = $('#dd-heading'); var list = $('.dropdownmenu-button'); tldropdown.staggerTo(items, 1.5, {x:20,opacity:1,delay:.5}, .5) .addPause(null,function(){ if(toggle)tldropdown.play(); } ) .staggerTo(items, 1.5, {x:20,opacity:1}, .5) function over(){ tldropdown.restart(); toggle=0; } function out(){ tldropdown.play(); toggle=1; } list.hover(over, out);
  17. All, In the Draggable docs at https://greensock.com/docs/Utilities/Draggable there is reference under the "onThrowComplete" property to a "onThrowCompleteScope" that can change the scope of what is being passed to the onThrowComplete function. "By default, the scope of the onThrowComplete is the Draggable instance itself, but you may define an onThrowCompleteScope if you prefer, just like any other TweenLite or TweenMax." Presumably this can be used in the same fashion as the TweenLite/Max onCompleteScope, onStartScope, onUpdateScope, etc. settings. Maybe I'm missing the obvious, but I cannot for the life of me find any documentation or examples of using this mechanism - apart from passing it an empty object as '{}' - anywhere, including the TweenLite / TweenMax documentation, and would greatly appreciate a simple example of what the format for defining a scope to be passed to one of these functions looks like. Any suggestions or a pointer to any documentation I've missed would be hugely appreciated. Specifically, I want the onThrowComplete "this" context to refer to the target element, rather than the default draggable instance. I know I can get the target from within the draggable instance, hoewever I'm to have a single onUpdate function which I would also be calling directly based on other (non-draggable) actions. Many thanks!
  18. I need a click event on (section-2) which will do the following: - Page body changes background colour (adding class="darkerblue").- The main element (clickable) to move across x:500, scale:1.5. - if I click the main element it will revert all. -If I scrollback to previous scene(section-1) it will revert all. From line 93, where I started making the scene for section-2
  19. Hey everyone. I am building a website using a drag and drop menu where a new page is opened when an element is dragged and dropped on one of the menu pages icon. It's been working alright for a while until today. It just takes me to the new page but page content doesn't load. This happens only in firefox. Everything works perfectly on all other browsers. I keep getting this error on firefox - NS_ERROR_FAILURE: TweenMax.min.js:15. I'm confused as at this point , I don't know how to move forward. Can someone help?
  20. I'm trying to expand an element's height from 'auto' to '100%', and reverse it. By just using `to()` percent height, there's a slight jolt in height due to percent-to-pixel rounding. So in order to circumvent that, there was another post that suggested to predetermine the heights before starting the tween. The two issues I'm having right now are: Timeline is compiled ahead of time, but I thought the whole point of a property function was that it was executed during runtime (deferred). During reverse, I would like to do the opposite, swapping the starting and ending property values, but the property function is not executed during runtime. What is the method for calculating runtime start values? I saw some posts suggesting to create a new timeline, but that seems heavy handed since one would have to cache the playback position, recreate the timeline, resume from the cached position in reverse, and possible do this multiple times if the user decides to change the window size or hide other elements affecting the height value during other parts of the tween. Is Timeline at all capable of runtime start values? Here's an excerpt of the timeline: let startHeight let toHeight return new TimelineLite({paused: true}) ...other tweens .to(this.elSpinnerWrapper, tweenDuration, {...tweenProps, opacity: 0}) .set(this.elSpinnerAndPickerWrapper, {height: '100%'}) // <--- This is the element to expand/contract .call(() => toHeight = this.elSpinnerAndPickerWrapper.offsetHeight) .set(this.elSpinnerAndPickerWrapper, {height: 'auto'}) .call(() => startHeight = this.elSpinnerAndPickerWrapper.offsetHeight) .set(this.elSpinnerAndPickerWrapper, {height: startHeight}) .to(this.elSpinnerAndPickerWrapper, tweenDuration, {...tweenProps, height: () => toHeight}) // ...other tweens Any suggestions would be appreciated.
  21. Hi all, My issue here is a bit two-fold. I've been making steady progress on this project, but I've hit another wall. The first issue is that since I've added my Timeline for the second animation, the animation opens immediately on browser load. The second issue is that my Timeline doesn't seem to be running the .fromTo() I've defined for it. So what I'm attempting here is to define the first animation, define the second animation, toggle the first with click, toggle the second with timeline onComplete of the first animation, and then to be able to reverse the whole sequence on click again. I've made a mess of my code I think and I'm having a hard time piecing it all together. I feel slightly bad about having so many questions/requests for assistance. If I'm asking an inappropriate amount or types of questions please feel free to let me know, I wouldn't want to violate any forum rules. Whatever you can help me with I will greatly appreciate and I thank you in advance.
  22. Hi all, I need to reverse my div's animation to its original state on the click of the link. I've been reading that TimelineMax is the only way to do this? Will they work together in this context/is there a way to do this with just TweenMax/am I stuck in the woods? The reverse() function in TweenMax doesn't seem to really do anything besides stopping the animation from working altogether. I've tried using TweenMax.to in a separate instance that selects my .link class for the addEventListener( 'click', animate); to return the div to its former properties but that hasn't worked either. You can see my attempt in the pen. Any tips? Thanks in advance!
  23. Hi all, So I am attempting to make it so my child grows into its parent. I have my wrapper div's margins set to 5vw so that I have a perfect border all around my browser. The issue seems to be when I click the div and the animation starts, it ignores the margins set there and expands past the wrapper's containment field. What am I not seeing? Thanks in advance!
  24. Hello Greensockers, Here's another gifani-inspired greensock animation The animations of the triangle are identical in the "use" copies. I tried to slightly modify the animation of the copies. But the code only partially works. (in the code after / * this -> * /) Attached gif animation shows what the result should look like. Is my approach a possible way? Or do I have to animate all triangles individually? Please leave your two cents
  25. Zuriel

    FastDOM

    Can you tell me anything about FastDOM and if GSAP uses something similar or if you have ever heard of it, etc? I personally haven't heard anything about it until recently when someone recommended it to prevent some layout thrashing (something you see commonly with parallax animation where you are trying to move something based on scroll position, etc, etc). Whatever it is doing or whatever it does, it seems to boost performance. Do you know anything more about the techniques it uses and does GSAP do something similar? different? better? or are there some drawbacks to the process that FastDOM is using? etc. https://github.com/wilsonpage/fastdom
×