Search the Community
Showing results for tags 'tweenmax'.
-
Hi, i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not. Interesting is that when you click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx
-
When I am running my angular4 application and i start on a specific route, and navigate to any other route, I get this error ERROR TypeError: Cannot read property 'hasAttribute' of null When I search my entire project and all loaded dependencies, one of the files that uses hasAttribute is TweenMax and ScrollMagic. Does that mean my errors has to be somewhere in TweenMax or ScrollMagic. It looks like the app is trying to load or find a dependancy, as the error is piped out in the Webpack Bundle right before GSAP starts. If i start on app.about as my route, and goto app.contact or app.welcome or app.portfolio I get the hasAttribute error when I leave the about scene. I destroy a scrollmagic scene on leave but i do that in another place on another route and don't get this cryptic error. if i start on ANY other route, and goto about and then off about, i never get that error. So i guess my question is, do you think this is TweenMax related? assuming that error is thrown? or could there be a possibility that its something with webpack packing tweenmax, or maybe something else not necessarily TweenMax. I tried to clear the component in that route out to be 100% blank, and it still happens. The only time it doesnt happen is if i obviously start from another route, or I remove tweenmax and scrollmagic from my app, and then it works again.. i kinda feel this question will be hard to answer without someone just looking at the source 100%, so im not expecting much but just wondering if anything clicks for anyone?
-
Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance
-
Hello, I have created an Animate project where I have used TimelineMax and a few Animate timelines/tween. (the reason for Animate timeline is that I need to utilise mask). From my TimelineMax I would like to call the Animate timelines/tween to start these, rather than have them all fired at once in the beginning. As you will see in the attache code, the yellowBar2_mc is the movieclip that need to be called to start later in the timeline. var tlheadline = new TimelineMax({}); tlheadline.to(this.inspire1_mc, .8, {delay:.1,alpha:1, ease:Sine.easeOut}) tlheadline.to(this.inspire1_mc, 4.5, {delay:-.9,x:"+=100",ease:Power2.easeOut}) tlheadline.to(this.yellowBar1_mc, 4.5, {delay:-4.5,x:"+=100", ease:Power2.easeOut}) tlheadline.to(this.inspire1_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.yellowBar1_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.engage_mc, .8, {delay:.1,alpha:1, ease:Sine.easeOut}) tlheadline.to(this.engage_mc, 4.5, {delay:-.9,x:"+=100",ease:Power2.easeOut}) tlheadline.to(this.yellowBar2_mc, 4.5, {delay:-4.5,x:"+=100", ease:Power2.easeOut}) tlheadline.to(this.engage_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.yellowBar2_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) Hopefully this is a simple solution. Thanks in advance. Animate.zip
-
Hello, Simply trying to have my "clouds" (the red boxes that say cloud) to repeat. Currently, they are repeating, but the animation doesn't end (the cloud doesn't make it to the other side of the screen) There are about 5 different clouds on the page and I want them all to move at varying speeds, and then loop once they can no longer be seen on the page. Any help greatly appreciated. Cheers!
-
I'm trying to have .scene1 slide off the page to the left side of my animation. My goal was to add a property of overflow:hidden to a group named .screen-wrapper. The idea is that once .scene1 slides off the screen it would not be seen beyond the white screen. Sadly this is not working. When checking out the code it seem to be taking the attribute. Is there a way to-do overflow:hidden, or am i doing it wrong? Any help would be great.
-
Hello, I was wondering if anyone could provide me with a snippet on how to use SplitText and mouse events? I have done some snooping around but all, so far, has been fruitless. Here is what I have so far var myHeaderSplit = new SplitText(".text-container h1", { type: "words,chars" }); var headerChars = myHeaderSplit.chars; TweenMax.staggerFrom(headerChars, 0.5, { opacity: 0, rotation: -720, scale: 100, ease: Power1.easeOut }, 0.2); headerChars.onmouseover = function () { TweenMax.to(headerChars, .2, { css: { opacity: 0 } }); } any help greatly appreciated
-
Please check the codepen link and could someone please help me to create "Tada" or "Flash" effect instead of "Shake" effect? Thanks in advance.
-
Hello, first time here I'm trying to put together a one-page scroll with a "cube" animation. Basically I would like to see the red cube falling in some very specific divs during the panels navigation (the grey ones), but I fear that I'm using too many libraries. My reference: https://tv.youtube.com/welcome/ My working draft: http://j-a.it/tic/ Any suggestion? Thanks EDIT, uploaded a CodePen.
-
This might not the right forum, but would appreciate any thoughts. In my codepen I am animating a div with an image in it. The issue is that I am animating my div left from 100% to -100%. However -100% is WAY longer than when the rightmost edge of the div is off of the screen, adding extra time. I essentially want it to end up at right: 100%. Is there a way using CSS to get it to stop at the equivalent of right: 100%, but while animating left? I was able to solve the issue by calculating the values dynamically on window.resize and killing and redeclaring the tween. Surely there has to be a better way? Thank you.
-
I'm working on a single page design that when I click between the NAV items in a dropdown menu, it tweens all the headers to a new name that are lists. I'm having an issue with Tweens on a click. The codepen has the current example. 1. If you click "clients", it Tweens the top header down and clients appears 2. If you click "profile", it Tweens the top header back and the default Name appears 3. If you keep clicking between the two, it still moves back and forth, but it loses it's Easing effect. I'm trying to do this between four headers, but I was just trying to get the initial setup here.
-
Hi i have multiple div like #animate123 when the cubic beizer ends the the div will disappear (smoothly reduce the width and height or scale till the bezier track ends) var tween = TweenMax.to("#animate123", 5, { bezier:{ type:"cubic", values: [{"x":178.853394,"y":292.738353},{"x":178.853394,"y":292.738353},{"x":461.554575,"y":189.214815},{"x":640,"y":255.010604}], autoRotate:["x","y","rotation", 0, true] }, ease:Power1.easeInOut},{className: "+=fish"}); please help me
-
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.
-
I've got a number of timeline functions that are set inside of an object so that I can call them programmatically. You click a button with a number as a data attribute and it call a timeline method on one of these functions, like functions.function1.play(). I can get them to play(), but reverse() doesn't work. Am I missing something simple? var box = document.querySelector('.box'); var play = document.querySelector('.play'); var reverse = document.querySelector('.reverse'); var functions = { scale: function() { //console.log(this); var tl = new TimelineMax({paused: true}) .to(box, .5, {scale: 2}) return tl; } } play.addEventListener('click', function() { functions.scale().play(); console.log(functions.scale()); }); reverse.addEventListener('click', function() { functions.scale().reverse(); //alert('hey'); });
-
Hi, I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this: @keyframes { to { transform: translateY(-100%) translateY(100vh); } } This proved to be a crossbrowser way in CSS instead of: transform: translateY(calc(-100% + 100vh)) .Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly: var value = -$('img').height() + $(window).height(); var tweenDown = TweenMax.to("img", 5, {y: value}); However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position. Thanks in advance!
-
Hi everyone! I am working on a project at the moment, and I am using this code snippet: TweenMax.set(convertForm, { y: -30, autoAlpha: 0, force3D: true }); *Note I have tried without the force3D too. And it is generating the following CSS: visibility: hidden; opacity: 0; transform: translate3d(0px, -30px, 0px); However the problem I am having is that the transform doesn't have any vendor prefixes, how can I change this, as I need the animation to work across multiple browsers. Many thanks in advance!
-
Hello, i'm trying to make splittext animation on scroll using scrollmagic, the animation works but every animations are playing when windows is load, and i want my animations works when the parent section of my "content__text" div is in the viewport Anyone can help me to fix it ? http://codepen.io/AdverisTeam/pen/aJebRJ
-
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!
-
Hi I have problem when animating with CSS calc(). It's just jump to new position, without delay and animation. Is there any special way to do css math when tweening? How to make tween relative to viewport or container?
-
Hi Guys I have a simple Tween that I'm linking to a scroll magic trigger. I'm unsure if my problem is GSAP related or Scroll Magic (if it is a SM issue I appreciate this is off topic). Basically I have GSAP and the GSAP for SM plugins running (i've copied the stacking order for the scripts into the codepen JS settings to mirror what i have running on the site), and I would like it so when the user scrolls the tween is fired. What is happening though is the Tween I have loaded into the scroll magic controller if firing on page load. I've made a really simplified version of the problem here : http://codepen.io/emilychews/pen/WpYgWe Any help or suggestions would be amazing. Emily. -
I tried to add a border to a banner Ive made, but none of the tries worked i tried .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"}) I tried with an inset and i get the same effect but I dont want it to be transparent. .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. Here is my codepen
-
Hello All, We're using ScrollToplugin and Tweenmax library with ScrollMagic plugin,noticed TweenMax-> Scrollto operation not working. I want to pass OffsetY on the pinning element but TweenMax - offsetY parameter not accepting also scrollTo-> Y option not working with element-id only working with numeric value. As mentioned on the greensock tutorial (https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/) for add some margin top we can use offsetY option with numeric value but unfortunately its not working,no any error in console log . Please see this code-snippets http://codepen.io/karamveer/pen/xqjYQg and suggest what else from our side? Thanks in advance Thanks, Karamveer Singh
-
Hello there, How would I go about creating 'masks' on the sides of my page where the elements slide in? I see this done very well on this infographic https://www.ceros.com/examples/visage-data-storytelling/ Thanks in advance EDIT: Obviously I am new to use lots of tweens on 1 page - is there a way I can minimize my code? Cheers
-
Hey, When animating an unknown number of elements like so: var timeline = new TimelineMax({repeat:-1}), items = document.querySelectorAll('.item'), startDuration = 20; for(var i = 0; i < items.length; i++) { var myDelay = (i * 0.5); animate(items[i], myDelay); } function animate(item, delay) { var a = TweenMax.to(item, startDuration, { rotationZ:'360', ease:Linear.easeNone, repeat:-1 }); timeline.add(a, delay); } What is the best way to modify the duration/speed of an individual tween? Thanks
-
Hello I've got five Box and five buttons. I want the first button, the display Box1 and other boxes are hidden. Button 1 => Box 1 Button 2 => Box 2 Button 3 => Box 3 Button 4 => Box 4 Button 5 => Box 5
