Jump to content
Search Community

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

Found 627 results

  1. 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);
  2. 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!
  3. 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
  4. 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?
  5. 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.
  6. 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.
  7. 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!
  8. 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!
  9. 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
  10. 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
  11. Hi, this is my first forum post and I'm hoping to get some help with an issue and learn more about GSAP. The project I'm working on is replicating a video game character select screen where the user can navigate through 3 characters (using the left and right arrow keys) which have idle animations until selected where an active animation will play on the selected character. I am doing this by using sprite sheets and SteppedEase in TweenMax. I have the navigation and idle and active animations on document ready working. The problem I am having is when switching to the next character. The way I believe it should work (with limited knowledge of GSAP) is to kill the idle animation on the element that's to be selected and return its progress to 0 before adding a new active tween to the element. The main issue at the moment is I cannot seem to kill the animation of the specified object. I have tried using TweenMax.killTweensOf() but this does not reset the progress and when the active tween is added it starts on the frame from which the idle animation was killed. I have recreated a demo with basic sprite sheets (note: there may be an initial delay in loading the sprite sheets in CodePen because I am using Dropbox as a makeshift CDN) and labeled the code I am having issues with with the comment "start here". There are two areas with this comment, one for killing the active tween and one for killing the idle tween. What I am asking for specifically is help in killing and pausing (pause(0)) the tweens in question. The way you will know if this works is if you wait until the sprite sheet in the boxes are at a stage past "1" in their images and then navigation to another box, the sprite sheet of the box you navigated away from should return to the first stage which should display the number "1" and stop the tween, the box you navigate to should also return to the first stage and stop the tween, the 3rd box should continue its tween. I hope this doesn't read like an essay but I wanted to try and give as much detail as possible on what I need help with and what I've tried so far. Again any help / guidance will be appreciated as I've been banging my head against my keyboard for the past few days. Thanks
  12. Hi all, one mask - two rects - one timeline - the help of use that simple it can be
  13. I'd like to flip the object being animated right when it hits each point in the bezier animation. I'm aware of onUpdate but that fires every frame. Is there a way to know precisely when a bezier point is hit?
  14. Hey guys, my simple Tweenmax.set () is going on chrome and opera but not on edge IE11 FF56 have checked three different ways - alway the same result. can anyone point me the right direction ?
  15. Hi there, Im essentially trying to create some cool rotation effect animations. I have linked my codepen. I want the top box to roll back out another way when you click '.top'. Roll our to the right would be perfect. I'm also trying to reduce my code footprint.. any help as to how I could possibly use more variable or a loop etc would be greatly appreciated. Cheers
  16. I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
  17. I have this tween that repeats infinitely: var sparkleblink = TweenMax.staggerTo(".confetti", .5, {ease:Linear.easeNone, opacity:.2, repeat:-1}, .01); but I want to stop this animation after a certain point. I have a TimelineLite() which calls a function after the last animation: var tothebox = new TimelineLite(); tothebox.to(".scrollnotif", .1, {opacity:0}) // ** other animations here** // .to(".scrollnotif", .1, {opacity:1, onComplete:killthis}); Then I have that function that's being called onComplete: function killthis(){ sparkleblink.kill(); } Not sure if I'm missing something or what. Advance thanks for whoever is going to help!
  18. I have a website in which I'm trying to load the TweenMax tag; https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js Everytime I try to do it, I get this: TweenMax.min.js:16 Uncaught TypeError: Cannot read property 'greensock' of undefined at Function.<anonymous> (TweenMax.min.js:16) at check (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at new c (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at t._gsDefine (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at TweenMax.min.js:16 at TweenMax.min.js:16 But, when I load the TweenLite tag (https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js) before hand, the TweenMax tag loads just fine. The website I'm trying to add this to is: http://www.pergunteaumamulher.com/ (it's in Brazilian portuguese). You can try to add the tag in the console to see the behavior I'm pointing out. Have you ever seen something like this? I believe it might be the same problem we have seen in here: Has it ever being addressed?
  19. I'm getting an error when trying to use TweenMax in React component. I create the component like this below. import React, {Component} from 'react'; import {connect} from 'react-redux'; import Thumbnail from './thumbnail'; import TransitionGroup from 'react-transition-group/TransitionGroup' import {fetchHomeCollection} from '../../actions/client'; import styles from '../../../styles/client/home.scss'; class Home extends Component { constructor(props){ super(props); } componentWillMount(){ this.props.fetchHomeCollection(); } firstChild(props) { const childrenArray = React.Children.toArray(props.children); return childrenArray[0] || null; } renderThumbnails(){ const {collection} = this.props; if(collection.length <= 0) return <div>Loading...</div> return collection.map((photo, index)=>{ return( <TransitionGroup component={this.firstChild} key={photo._id}> <Thumbnail {...photo} delay={0.5 * index} key={photo._id}/> </TransitionGroup> ) }) } render(){ return ( <div id="home" className="flexbox-container"> {this.renderThumbnails()} </div> ) } } function mapStateToProps({photos}){ return{ collection: photos.collection } } export default connect(mapStateToProps, {fetchHomeCollection})(Home); then in my Thumbnail component I use the componentWillAppear to call my TweenMax fromTo method. import React, {Component} from 'react'; import { Link } from 'react-router-dom'; import {TweenMax} from "gsap"; export default class Thumbnail extends Component{ componentWillAppear(callback){ const el = this.container; TweenMax.fromTo(el, 0.3, {opacity: 0}, {opacity: 1, onComplete: callback}); } } Anyone know why I might be getting this error ?
  20. Hi So i have multiple dom elements that i animate along an svg path ... for now ... looping clockwise works ... it loops forever but if i call reverse() .... it acts like a rewind() ... if it repeated twice ... it will reverse only 2 times .. not forever var timeLine = new TimelineMax({ repeat: -1, paused: false, yoyo: true }); timeLine.add(TweenMax.to(arrPeople[i], totalTime, { bezier: { type: "cubic", autoRotate: true, values: points }, force3D: true, repeat: -1, yoyo: true, ease: Power0.easeNone, onUpdate: function() { if (this.target == arrPeople[0] && !initialized) { let children = timeLine.getChildren(); if (children[0].time() >= totalTime - totalTime / people.length / 2) { timeLine.paused(true); initialized = true; } } } }), (i + 1) * totalTime / people.length); this is the code i use to create the timeline and the tweens any sugestions? thanks
  21. I'm trying to export a timelineMax animation as mp4 video using phantomjs. Everything works fine, but the animation speed is different on phantomjs. It's running too fast, 10-second animation completes in 2 seconds. If I timescale to 0.2, it works. Framerate is set to 24. Does anyone have an idea on what's happening? Thanks.
  22. I am getting a strange problem, i am animating a simple DIV along a Bezier path using scrollmagic. Everything is working fine, however when i reach the end of the animation, The pinned element which it is in, does a big jump. I have troubleshooted for hours and tied it down to the transition of when the animation is running it is using Translate3D property, then when it finishes, it quickly jumps to matrix property. It would appear that this switch in properties causes my page to jump. Is there anyway to stop the matrix property being applied, because the object stays where it is supposed to if i use translate3d to the last coordinates of the animation.
  23. Hi there, I am getting this error when I am opening this url in mobile and dragging bow to left." Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)". Here is codepen url '
  24. Hi, As the title says, just before starting the tween the background colour flashes to white. Only on Firefox. I've tried to '.set' and also '.fromTo' to 'force' the starting colour of the background but no avail. Browser: Firefox 55.0.3 (64-bit) Os: OsX 10.11.6 Device: MacBook Pro (Retina, 13-inch, Early 2015) Thank you
  25. First off, to the creators and participants of this product and forum. Thank you. I've used GSAP for a bunch of small projects. My current project is pushing my current knowledge of the library and I'm learning some awesome techniques. Here's my problem: I've got a timeline that zooms through series of images. I have a loop that adds tweens to to the timeline so descriptive content related to the different sections of the timeline will fade in and out in time. Also, if you click the corresponding button, the timeline will scan ahead to that particular point. All of this works except, after clicking to scan ahead, I need to re-add the tweens that fade the content in and out. Right now I am calling the function on complete that adds the tweens to timeline, but what happens is that the contents quickly cycle through as the tweens catch up with the timeline. I just want them added so that way as the animation progresses they appear in time. Please forgive the repeat js throughout my pen. I'm just trying to get my desired animation behavior locked down before cleaning things up.
×
×
  • Create New...