Search the Community

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

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.

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, 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

I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.

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'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 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 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 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

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

I'm desingin the web site that it's structure is like scrollmagic. what do i have to do to make the tweenmax animation codes play when it arrives at anchor(#sample)?

Hey I'm currently working on a touchscreen which let's say for simplicity sake, just has a fullscreen bitmap image, the image is of a book and I wan't to be able to zoom into certain parts of this old book. Around this bitmap of the book, I've placed invisible DIV's to click on, when clicked, I would like the entire bitmap, to center the invisible box, by scaling up the entire bitmap. Basicly like the Zoomooz.js library, but I just know there must be a way to do it with GSAP ................. ................. . . . . . . Result should be: . X . With the "invisible" dom element zoomed in, but by using the viewBox. . X . . . ................. ................. When reading around the forums, I came across this post, which exactly does what I want, but this whole viewBox thing, seem to be a SVG thing, and therefor no help. This post Any ideas? Codepen: http://codepen.io/Abarth77/pen/MpJagb?editors=1111 The File: Zoom.zip

Hi I'm going to be adding an image gallery to a site and I basically have it so that when you click on an image, the image is cloned and reappears in the centre of the window. The codepen is here: http://codepen.io/emilychews/pen/YZGxWZ I would like it so that the cloned image goes through a transformation to arrive in its new position. At the moment when you click on the image, the clone just appears in the middle of the window. I can't seem to get my head around how to have it so wherever the image is on the screen, it smoothly transitions to the central position. I tried swapping out the CSS object in my JS with some tweens, but this was a bit of a non-starter. I'm quite up on the functionality of Greensock tweens and timelines now, however, I'm at a bit of a loss how to approach this. Any help or pointers would be amazing. Emily. For quick reference I've also cut and pasted the JS / HTML and CSS code below: JS $(function() { // ===== vars to evaluate the left positioning after the element is cloned. var $windowWidthMiddle = $(window).width()/2; var $holderWidthMiddle = $('.holder').width() * 1.5 / 2; var $left = $windowWidthMiddle - $holderWidthMiddle; // ===== vars to evaluate the top positioning after the element is cloned. var $windowHeightMiddle = $(window).height()/2; var $holderHeightMiddle = $('.holder').height() * 1.5 / 2; var $top = $windowHeightMiddle - $holderHeightMiddle; // ====== Clone each image when clicked - these all have the default class '.holder' $('.holder').on("click",function() { if ($( this ).find(".cloned").length == 0) { // if not cloned already var $myClone = $(this).clone() .insertAfter(this) .addClass('cloned') .css({ position: 'absolute', left: $left, top: $top, transition: 'all 1s' }); // ===== This adds the small 'x' to the cloned image to close it $myClone.prepend('<div class="closeX">X</div>'); } }); // ====== This is what causes the cloned image to be closed / removed $(".wrapper").on("click", ".closeX", function(e) { e.stopPropagation(); // this stops the click on the holder $(this).closest("div.cloned").remove(); }); }); CSS .wrapper {width: 100%; height: 100%;} /* This is each image before cloning */ .holder { width: 20vw; height: 100px; background: red; position: relative; margin-bottom: 5px; display: inline-block; z-index:0; transform-origin: top left; color: white; } /* The positioning 'top' and 'left' values after cloning are added in the javascript */ .holder.cloned { background: blue; z-index: 20; transform: scale(1.5); } /*CSS for the prepended 'x' that shows on the cloned element*/ .closeX { position: absolute; background: yellow; top: 5px; right: 5px; width: 25px; height: 25px; line-height: 25px; text-align: center; cursor: pointer; color: black; } HTML <div class="wrapper"> <!-- five images --> <div class="holder image1">Image 1</div> <div class="holder image2">Image 2</div> <div class="holder image3">Image 3</div> <div class="holder image4">Image 4</div> <div class="holder image5">Image 5</div> </div>