Jump to content
GreenSock

Search the Community

Showing results for tags 'TimeLineMax'.

  • 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. Hi, I'm not sure if this is related to the topic: https://greensock.com/forums/topic/15728-onstart-maximum-call-stack-size-exceeded-error/ I'm trying to build a fairly complex (I think?) multi-stage animation, and I've started getting the following error messages: TweenMax.min.js:16 Uncaught RangeError: Maximum call stack size exceeded at d.h.add.h.insert (TweenMax.min.js:16) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) TweenMax.min.js:1 Uncaught RangeError: Maximum call stack size exceeded at d.k.totalDuration (TweenMax.min.js:1) at d.q.duration (TweenMax.min.js:14) at d.q._remove (TweenMax.min.js:14) at d.h.add.h.insert (TweenMax.min.js:17) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) Presumably related, I can't get the latest stage I'm working on to begin. I guess as a newbie, I've a couple of questions for the more experienced Greensock users out there: Any idea what's going wrong here? Any thoughts on how I could be doing this better? I've cobbled together my current approach from forum answers / stackexchange etc, currently by using one main timeline and adding sub-timelines (via functions) at various label points. I don't need it to stop in as many places as I've added (thats mainly to help me approach it in sections), but I do need it to hold in the 'working' loop until restarted by controls elsewhere. Any help / thoughts greatly appreciated. Thanks!
  2. Hi I'm trying to work out why this code isn't working. I would like to scan the document to find every instance of and element with a class of bcg-parallax and then run the code below: if (window.matchMedia("(min-width: 767px)").matches) { var controller = new ScrollMagic.Controller(); $(".bcg-parallax").each(function(i, item){ var newIndex = i + 1; var itemRef = '.bcg-parallax:nth-of-type(' + newIndex + ')'; var parallaxTL = new TimelineMax(); parallaxTL.from(itemRef + '.bcg-parallax .content-parallax', 0.4 , {autoAlpha: 0, x:'+100px', ease:Power0.easeNone},0.4) .from(itemRef + ' .bcg', 1.8, {y:'-50%', ease:Power0.easeNone},0); new ScrollMagic.Scene({ triggerElement: item, triggerHook: 1, duration: '100%' }) .setTween(parallaxTL) .addIndicators() .addTo(controller) }); } I'm using the css rules plugin, but this code at this time is hiding the first instance of the .content-parallax and thats it. It is not firing any events at the point of scroll. Basically I want the animation to be relative to the elements position on the page. Any ideas, I'm really struggling. Thanks
  3. I successfully implemented a native slider from Framer to control the timeline, instead of using jQuery and the jQuery UI slider library. My main problem emerged when I realized that the timeline events [onComplete, onProgress...] were not trigger at all. Here is the prototype. Sadly, I don't know how to isolate the bug or recreate this outside of Framer, but essentially my code goes as follows. init = new TimelineMax({onComplete:updateSlider}) # hSection is an Framer layer init.from(hSection, .5, {opacity: 0, y:"+=200", ease:Power3.easeInOut}, 0) # footer.children is an Framer layer with elements within init.staggerFrom(footer.children, .5, {opacity: 0, y:"+=25", ease:Power3.easeInOut}, -.15) # Here is the slider component slider = new SliderComponent width: Screen.width / 2 height: 20 # Here is the slider event that I used to drag and affect the timeline progress. This works like a charm. slider.on "change:value", (event, ui)-> init.progress(ui.value ).pause() return # Here is the function that needs to be triggered the moment that timeline is completed. Nothing happens. updateSlider = () -> print init.progress() Can you help me out? CoffeeScript code
  4. Hi, I am aware my question is not complete but I need help to help you help me Do let me know what more I can provide to find a final solution. We have created an entire website using GreenSock animation. There is one master timeline. Other timelines only perform certain animations. We are using TweenMax along with eraser.js, howler.js, slick.js, splittext.js, jquery-ui.js. The issues is that the website keeps on crashing on mobile devices, including iPhone 6s plus. This is because website is alot RAM heavy and does not work well on any device which has less ram. It includes iPhones, iPads, most android smartphones. It works flawlessly on devices with good ram (OnePlus3). I have used all browsers on the phones on which the website crashed. It is impossible to find the issue as I do not get any error log on crash. I have reach the conclusion that the issue is RAM based on the observation that after restarting the phone the website works fine for a few minutes before crashing again. I have tried to debug it using chrome inspect element but have not been able to reach any conclusion. Following are the elements that I have looked at. - svg animation, I only have 1 single svg animation in the beginning of the website, - dom elements. The number of dom elements was too much because of splittext which is not resolved, - using x and y instead of left and top for better performance, - using scale in only one animation - using autoAlpha everywhere instead of opacity I kindly request you to provide me more details on how can I debug my website. Following is the link : www.icdlabs.in/final If you require any specific part of the code, I will post it here, please do let me know. Thanks in advance.
  5. Hello GSAPers, I need a help, I'm trying to pause each Tween inside a Timeline where I control the scrolling with ScrollToPlugin. I need it to stop, so I can control it with the Prev / Next buttons. To toggle anchors
  6. Hi, I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere? var tl = new TimelineMax(); tl.to(".circle", .5, {opacity:-1}) .staggerTo(".boxes", 1, { cycle:{ opacity:[-1, 1] ease: [Power4.easeInOut] } }, 0.05) .to ..... -thanks
  7. Hi I have a site where I have some elements in my style sheet that are set to opacity: 0 and translateX(0), these then animate with a TimelineMax (called sectionThreeIn) '.to' tween and scale up to opacity: 1 and translateX(1) which is all fine. I want to turn these animations off on mobile, so i've done a simple if statement: if (window.innerWidth < 768) { sectionThreeIn = null; } Because the animations only fire once I'm not bothered about doing any window resize events for desktop window sizes. The above if statement prevents the animations from firing on screens below this size, which is great. AREA OF CONFUSION I went into my CSS to add some media queries that change the opacity and transform values both to 1 for screens below 768px now the animations are turned off for the smaller screen sizes, so the elements don't effectively render invisible on mobile/iPad. But even without me doing this the elements are rendering as visible when I refresh the page (and clear the cache) on smaller screen sizes. This is confusing the life out of me. When i turn the if statement off, the CSS behaves as you'd expect, when I turn it on the end state of the animation is being implemented on small screens, but without the animation happening. Ironically what is happening is the end result I'm after, but I don't understand how this can possibly happen? If you make a timeline null, does it render as a completed animation, but without the actual animation happening? Also two of the three elements are using the CSS rule plugin - so I could recreate the issue on codepen, but I don't how to load the Greensock plugins (apart from TweenMax) onto a codepen pen? At present the site is on a localhost setup. I'm very confused.
  8. Hi am a newbie in web development only 2 months in and i got inspired when i saw the Nike sbdunk website so i wanted to create something similar, the problem is that when i switch between the different categories (ie. men, women, unisex) too quickly it breaks my code, pls help. Here is my javascript. and i just uploaded to a freewebhost to show this issue https://bucco-cooporations.000webhostapp.com // menBtn menBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (mens.css("right") > "0px" & womens.css("top") >= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeIn}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & unisex.css("left") <= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"380%", ease:Linear.easeNone}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & womens.css("top") < "0px" & unisex.css("left") > "0px") { var mensTl = new TimelineMax(); mensTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } }); // womenBtn womenBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (womens.css("top") < "0px" & mens.css("right") <= "0px") { var womenTl = new TimelineMax(); womenTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"300%", ease:Linear.easeOut}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & unisex.css("left") <= "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"300%", ease:Linear.easeNone}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & mens.css("right") > "0px" & unisex.css("left") > "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } }); // unisexBtn unisexBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (unisex.css("left") > "0px" & mens.css("right") <= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"380%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") >= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") < "0px" & mens.css("right") > "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } });
  9. Hi all, This is my first topic and I hope I have done this correctly. The issue is that when I scroll through the site the transform: translate -33.3333% works perfectly, but when I click the nav.li (.section2) the transform:translate still uses the pin from #main and thinks it needs to do -33.3333% again. How can I set the transform:translate to x: 0 when I click the nav li. Unfortunately my Codepen does not replicate the issue. Any help is appreciated. Thanks in advance, Regards, Nick
  10. Hello everyone, I hope the GSAP pros here can help me at my rather simple problem thats driving my nuts since 3 hours (!). I have elements on a page that have to change color and scale. After this I want to reverse the animation. I need to do this for about 4 different Elements. So each element should animate like this: 1-2-3-3-2-1 and start once the other is finished with a slight delay maybe. I already tried with repeat: 1 and yoyo: true but then it repeats the animation like this: 1-2-3-3-2-1-1-2-3-3-2-1 which I don't want … At first I tried it in a timeline but am not sure if this is the appropriate thing to do for my kind of animation. var introTimeline = new TimelineMax(); introTimeline.append( TweenMax.to($(".Ele1"), 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); introTimeline.append( TweenMax.to($(".Ele2"), 1.5, {scale: 2, fill: "cyan", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); Can someone here help me? I would really really appreciate it! GSAP looks awesome but I'm quite confused right now …
  11. Hi, I've recreated a quick codepen of the issue I have, there is a '.set($list, {display: 'none'})' on line 16, which is not triggering. I've been playing around one full day on that and I can't figure out what's wrong, I'm probably missing something. So to see the first and main issue: - Click on the 'Show List' button => the list is set to display block then an animation is showing the list items and the title is disappearing, until here all is fine. - Click on the 'Show Title' to re-show the title and hide the list (display:none). => the title is showing, the animation on list item is working, but the list isn't going from display:block to display:none. I've also tried clearProps: All (and a lot of other workarounds, in css and/or full javscript, like adding and removing class), it doesn't work either. The second issue: var showList = new TimelineMax({paused: true, onComplete: console.log('complete')}); As you can see the animation is paused at first then triggered later, but the console.log is firing on page load, why? As it set to onComplete it should logically console.log when the animation is finished. If someone could have a quick look at this, it would be great. Thanks
  12. Hello GSAPers, I need a very important help. I'd like to know the best way to make alternate transitions between Timelines. Example: I click on the Go Red button to run the red timeline, and when I click on the Go Yellow button it will reverse the current timeline and start the required timeline. Is there a way to do this only with one Timeline?
  13. Hello, I have a expanding searchbar by using TimelineMax. If you click on the icon, the categories should scale away and the searchbar should expand to 100% width. When click anywhere on the body element while the searchbar is opened, the timeline should play in reverse state. This already works as intended. My Problem is that the timeline reverse is being applied with every click on the body element, even if the searchbar is not expanded plus the timeline is being interrupted and being resetted when clicking on the body element while the timeline is being played. I tried to solve this issues to give the search container a .data value open true or false, but somehow it will not work as intended. This may not be an explicit greensock probleme but rather a javascript logic problem, but I'd be very grateful if anyone may help me out. Timeline Code: (function($) { var $irpsearch = $('#irp-newssearch-container'), $irpsearchinput = $('#irp-searchform-input'), $search_icon = $('.irp-news-search-icon'), $btn_container = $('.irp-filter-buttons'), $filter_btn = $('.filter-btn'), $search_seperator = $('.irp-search-seperator'), $body = $('body'); var openSearchAnimation = new TimelineMax({ paused: true }) openSearchAnimation .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1) .set($btn_container,{'display': 'none'}) .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6') .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0') .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1'); openSearch = function () { $irpsearch.data('open', true); openSearchAnimation.play(); $irpsearchinput.focus(); return false; }, closeSearch = function() { $irpsearch.data('open', false); openSearchAnimation.reverse(0); } $irpsearch.on('click', function(e) { e.stopPropagation(); if (!$irpsearch.data('open')) { openSearch(); /* Body Click */ $body.off('click').on('click', function(e) { closeSearch(); }); /* Escape Hide */ $( document ).on( 'keydown', function ( e ) { if ( e.keyCode === 27 ) closeSearch(); } }); } else { if ($irpsearchinput.val() === '') { closeSearch(); return false; } } }); })(jQuery) Codepen: codepen.io/anon/pen/YQqQWm All the best Pascal
  14. I'm quite new to the jQuery and GSAP and really need Your help . I'm having a problem in animating children div while parent element is hover using TweenMax/TimelineMax. I can animate css of children with jQuery like this: $('.div1').mouseenter(function () { $('.div2').css('font-size', '20px'); }); but since I want to build a really complex animation I would like to use TimelineMax to my code in place of "css('font-size', '20px');" but nothing seems to work. I've build a simple test.html to find a solution: <body> <div id="logo"> <p id="text">TEXT TO BE ANIMATED</p> </div> </body> and I've tried to animate my #text element with this code (obtaining only parent animation): $(document).ready(function () { var hoverEffect = $("#logo"); hoverEffect.hover(function() { TweenMax.to(this, .35, {borderLeft: "15px solid #00b89d"}) }, function() { TweenMax.to(this, .5, {borderLeft: "0px solid #00b89d"}) }); }); I've also tried jQuery .find() and .children() methods but failed... Thanks in advance for Your help
  15. i'm trying to use the window vertical scrollbar of the browser as slider of an istance of timelineMax. i'm also using the plugin scrollToPlugin. all seems working, with the not negligible detail that the timeline.progress is not the same of the scrolling percentage. Both, timeline progress and scrolling start from 0 and end to 1, but in all other points are differents. so, if i try to move the verical scrollbar (as timeline slider) and then i set the timeline.progress with the scrolling percentage, the scrollbar (and the page) move immediatily to another position, very different position. I prepared a simple page at this address www.attivitacollaterali.it/testArea/scrollTimeline.html (all the scripts are in the head - do no use the mouse wheel when scrolling) Maybe all the world knows "why" this strange behavior, excpet me. Thank you.
  16. As a former user of Adobe Edge, which has apparently been abandoned, I am going to have to rewrite a couple of Edge animations in GSAP. I am thinking of using Timeline Max to create what is essentially an animation that just changes the image a viewer sees, according to what button he clicks. The idea is that, for instance, when a viewer clicks on button 4 (in a series of numbered buttons), the timeline advances to the designated frame and stops. Same action for all buttons. Are there any examples of this type of "animation" using Timeline Max that anyone knows of?
  17. Hi, First of all thank you for developing such an amazing lib and it has made our lives much simpler. We are developing a major website using greensock where all the animations are being handled by various timelines. it is a single page website so there is no page refresh. The top navigation helps navigating between timelines by tl.play(). These timelines also have a loop of flickering text set to repeat -1 The issue arrises when we load a new timeline and go back to the previous timeline. Then the loop starts running twice and the page crashes. I wish to kill all timelines on the document whenever a new timeline is loaded. Because there are like 20 chapters, it would be very very tedious to kill all animations on every click. I tried using TweenMax.killAll(); this abruptly kills all animations ( even if i have an animation playing ) and the next animation doesnt play. I tried using chap2.kill(); this works nicely but is not expandable. There are going to be 20 chapters which will make developer's life miserable. My code : chap1 = TimelineMax chap1.to(something) chap2 = TimelineMax chap2.to(something) // option 1 (not working) //click on chap1 in top nav TweenMax.killAll(); chap1.play(0); //click on chap2 in top nav TweenMax.killAll(); chap2.play(0); // option 2 (working but tedious) //click on chap1 in top nav chap2.kill(); chap1.play(0); //click on chap2 in top nav chap1.kill(); chap2.play(0); Can you please help me out over here. How to use killAll to enable a seamless display of animation. I was short on time so didnt make a codepen. If my query is not clear I will make a codepen n provide the details too. Thanks for your product. I hope it will keep on becoming better every day.
  18. I'm having some trouble with isSelector in TimelineMax.min.js and lazyTweens in TimelineMax.js . . . . The project I'm referencing can be accessed with password ' Olympus003 ' at https://st-fresh.github.io/electroncycle/electroncycle.html . . . . . . The _internals object has the isSelector prop on it, and here's the call stack: TimelineMax.min.js:12 Uncaught TypeError: Cannot read property 'isSelector' of undefined at Function.<anonymous> (TimelineMax.min.js:12) at h.check (TweenMax.min.js:15) at new h (TweenMax.min.js:15) at y._gsDefine (TweenMax.min.js:15) at TimelineMax.min.js:12 at TimelineMax.min.js:12 ... ... I noticed that in Timelinemax.js (unminified) the error is a bit different and is with reference to the lazyTweens prop: TimelineMax.min.js:29 Uncaught TypeError: Cannot read property 'lazyTweens' of undefined at Function.<anonymous> (TimelineMax.min.js:29) at h.check (TweenMax.min.js:15) at new h (TweenMax.min.js:15) at y._gsDefine (TweenMax.min.js:15) at TimelineMax.min.js:17 at TimelineMax.min.js:1281 . . . . . . I'm a bit unfamiliar with the TimelineMax library at this time, and just wanted some scope on handling this error, I appreciate any help you can offer within a return message, and thanks for TimelineMax ! What I tried// In the unminified I tried adding TweenLite.js to the project to see if the var dependent on TweenLite would get defined.. This wasn't a quick solution.
  19. Hi all, Firstly, thank you for this wonderful tool! I'm having some issues combining the ScrollToPlugin with TimelineMax. What I'm doing is basically a bunch of animations in a TimelineMax ending with a scrollTo at the end (to move to another section). This works the first time, but scrolling back up and down again has some issues. The animations all fire properly, but the ending scrollTo doesn't work (is only fired the very first time). Is this a known bug or intended behaviour?
  20. Hello. In the beginning on my code I declare a new TimelineMax object, and I add a new tween that has a delay using the to() method (this is a simplified version, i do add more tweens to this Timeline). The delay is defined by a previously declared variable (var). var tl = new TimelineMax() .to("#answerTextarea", 1, { someProp: "value", delay: delayVariable }) After this, delayVariable changes. When i replay the tl though, the delay is not equal to the new value. I tried invalidating tl using the invalidate() method, but this doesn't invalidate the delay. How should I proceed so that the delay is updated everytime I restart the tl?
  21. I have the following code and it works like a charm. Every card (card1, card2, etc...) "travels" from position 1000 to original with a .1 speed. What I'm trying to accomplish is to have every card travel at speed ".1" until it reaches 80% of "y" and then travel at a lower speed for the rest of the "trip". How can I achieve this? tl: any; this.tl = new TimelineMax({delay: 1}); this.tl .from(card1, .1, { y: 1000}) .from(card2, .1, { y: 1000}) .from(card3, .1, { y: 1000}) .from(card4, .1, { y: 1000}) .from(card5, .1, { y: 1000}) .from(card6, .1, { y: 1000})
  22. Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.
  23. Hi all! I'm noticing an issue with GSAP merging in transform properties originally formed in the CSS. I've attached a CodePen to show the issue. In Chrome, you'll see that both Dropdowns align to the center as intended. But in Firefox, IE11, and Edge -- it looks like the transform matrix that is generated is not including the calculated width of the dropdown component when transitioning. We can't use fixed widths (in the example that works) for a certain application, and found it really odd that only Chrome and Safari are handling this alright. Let me know if you need anymore info. Thanks as always!
  24. TimelineMax and Bezier plugin have such amazing possibilities, but I am a bit stuck with a few things I don't understand. On this example, The things that don't make sense to me. 1) I did not know how to determine the starting point for the bezier circle. By default, it was starting in the bottom left, and so I rotated the entire svg, and then rotated negatively the play arrow to get it back to a normal starting point. This hack is fine but I am almost 100% sure it is going to cause me issues and may already be. Is there a way to determine the beginning of a bezier curve that allows me to place the object I am rotating around it at a particular starting point? 2) The animation works great if I use TweenMax and just animate it like a normal tween. But when i create it as a TimelineMax animation that occurs on hover it starts way off the bezier curve, I'm assuming it is where it should have started in the first place before i rotated it and all of that. Once you hover over it, it jumps right on the path. Is there a way to snap it to its starting point while TimelineMax is paused? This may be the same question as 1... 3) Is there a way, besides breaking it in 2 bezier curves to have the hover animation stop in the middle of its bezier curve trip? I would prefer to have the animation pause in the middle and then on mouseout, complete the rest of the animation. But I don't see a way to have a bezier animation stop before it gets to the end. Any thoughts would be appreciated!
  25. Hi there, I'm using TimelineMax and getting some great results. I'm getting quite proficient with using the Timeline to animate various elements on the page. I've found a script called Typed.js that I've been able to run independently of the Timeline perfectly but I'm unsure of how to get it to play within the timeline? I know there are some callback features but my Javascript isn't great! http://www.mattboldt.com/demos/typed-js/
×