Leaderboard

It all comes down to whether or not you can trust that the string is what you think it is. If it comes from your sever, and has been validated, then the risk is low. If it's based on some user input, like a form, input, or url, then the risk is high. See how exploits work here. https://en.wikipedia.org/wiki/Cross-site_scripting#Exploit_examples @MarioLapone If you need help creating the data/instructions for your animations, this thread might be useful.

var hours = ["#hours-1", "#hours-2", "#hours-3", "#hours-4", "#hours-5", "#hours-6", "#hours-7"]; TweenMax.staggerTo(charges, .3, {opacity:0}, 0.3); TweenMax.staggerFromTo(hours, 1, {visibility:'visible'}, {visibility:'hidden', immediateRender: false}, 0.3); Any tween is rendered immediately, whether it is a combination of set + to tween, from or fromTo tween. You can avoid that by setting immediateRender to false. It is just unexpected behavior but makes a lot of sense if you check following video.

I"m guessing the audio might not be loading the first time you play. I also think its probably better to create the audio object once and then just play() it on each replay of the timeline. In other words there is no need to create a new audio object using the same mp3 every time. when you do that, you don't get the double playback here is the code GSDevTools.create(); var audio = new Audio (); audio.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1672622/badgeDraw_short.mp3"; audio.loop = false; audio.play(); function initAudioPlayer () { audio.play() } //Draw the badge function drawBadge (){ TweenLite.set("#coreBadge", {visibility:"visible"}); //Splash screen animation// var tl = new TimelineMax(); tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 }) tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"}); return tl; } //Control the Hud display with live typing// function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineMax(); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04) return tl; } var masterTL = new TimelineMax(); masterTL.add(drawBadge(), 0) .call(initAudioPlayer, 0) .add(runText("#hudGenius"), 1.35) //End code please don't post private pens. we can't fork them

jQuery's documentation is full of poorly written code. Here they use 'this' and 'element'. $( "button" ).click(function() { $( "div" ).each(function( index, element ) { $( element ).css( "backgroundColor", "yellow" ); if ( $( this ).is( "#stop" ) ) { $( "span" ).text( "Stopped at div index #" + index ); return false; } }); }); I think it's better to use the parameter. What 'this' refers to may not always be the element. // Using function inside callback $(".box").each(function() { innerFunction(); function innerFunction() { console.log(this); // FAIL } }); // Using bound function $(".box").each(function() { console.log(this); // FAIL }.bind()); // Using arrow function $(".box").each(() => { console.log(this); // FAIL });

Thanks @Sahil for the reply and answer! With the hints and tips I managed to make it work!

You will be able to access any global level variables of first file(file that is included first in your project) into the second file. But you can't access variables of second file into first. It's like the way you use any libraries like jQuery or GSAP, and use their methods/objects in your project. Now in your case it depends on where you are creating these variables and how you are including files in project and in what order.

It's not really good idea to just copy paste code in codepen when asking for help on forum. For example, you have posted images which are not present, the next and previous buttons are labeled as test1, test2 and most importantly your slider wasn't even visible to see what and if anything is happening. Anyway, nothing was working because you copied exact same code for next button and renamed it for previous button and click event was created on wrong id. I fixed that and added a little more code so if you click fast, it will speed up the ongoing animation and then it will call next slide in 0.1 second. I also changed all animations to animate xPercent instead of left, because animating left/top can give you poor performance. On every click event you have this code 'TweenLite.to(playBtn, {});', what do you expect it to do?

I think this will work for you

Glad you got it worked out. Wasn't really sure what I was supposed to see. Got kind of lost in the 60 lines of code and big SVG. In the future its best to reduce things as much as possible. Anyway, just wanted to make a note that you really don't have to wrap values in css objects. You could save quite a bit of typing over time if you like tlBalloon3.to(balloon3, 0.35,{ css: {x: -10, y: -10, opacity: 1, rotation: -3, transformOrigin:"75% 100%"}, ease:Power1.easeInOut}); //same as tlBalloon3.to(balloon3, 0.35,{x: -10, y: -10, opacity: 1, rotation: -3, transformOrigin:"75% 100%", ease:Power1.easeInOut}); technically the longer way (that you are using) is more efficient on the processor, but not in the sense that you would ever notice in any meaningful way and you only get that performance increase when the animations are created (once) not when they run. Good luck with the rest of your project. looks pretty cool.

I can't really think of a faster way. I guess caching a reference to the transform object is more efficient but highly doubtful it would save more than a few milliseconds. var transform = tempClip._gsTransform output+= " 'x'=>" + (transform.x)+ ","; output+= " 'y'=>" + (transform.y) + ","; output+= " 'sX'=>" + (transform.scaleX) + ","; output+= " 'sY'=>" + (transform.scaleY) + ",";

As for why it isn't working more than once, it is very tough to know without seeing how your page is setup. Please fork our demo from the docs below and add your own code click "run pen" click "edit on codepen" click "fork" add your own html, js, css (just enough to replicate the problem) save paste the url in your reply We will be happy to help once we can see what isn't happening and and the specific errors. Also, is it possible to detect with the scrollToPlugin when you have scrolled past an element? Sorry, the plugin doesn't have any of that type of functionality built in.

Sorry for the false question and the wast of time. I managed to resolve this issue by myself It seems i have made a stupid error in my code. require("gsap/PixiPlugin.js"); Works well! By the way thank you to tell me about the other tools!

Hm, I'm not familiar with Browserify. I have this general impression that its use is on the decline in favor of other tools like webpack, rollup, etc. What happens in your code? Are you getting errors? Do the PixiJS animations just not work (silently)? It'd help to know more specifics about what's going on.

Yep, it sounds like an onUpdate is your best bet. Querying element.style.opacity is probably no slower than creating another proxy element and animating the values simultaneously and checking that object instead. You're doubling the memory in that case, and adding another set of calculations on each tick. I doubt it'd help much, but you could ONLY do the proxy object thing and then inside your onUpdate, that is where you'd apply it to element.style.opacity (just so that there's only one thing animating, the simple proxy object, and you're merely applying that value to the element in the onUpdate. But again, I kinda doubt you're gonna notice much of an improvement with that strategy. Good luck with your experiment.

Thanks, Carl - lightning speed reply! My apologies about the pen, I forked it off a private pen and forgot to make it public, I've changed that now. Thanks for the fix too, looking at it I can see this is right. I'll test it out and post back but looks good.. Really appreciate your time.

Hi @Teun87, in this topic you will find a solution " new Intersection Observer API": Here an example of @PointC Happy tweening .... Mikel

Hi @mikel & @OSUblake. As promised, here is a link to a short video, showcasing the result. https://streamable.com/sgntm The animation we talked about was to create a minimap for the actual game, so the minimap in the bottom left corner, is using the principal of your code examples. I believe it turned out pretty well Thank you again for the help, it was highly appreciated. - Plenge

Hi @beau_dev Welcome to the forum. I'm not 100% sure what you need to happen here, but @Sahil is exactly right. The SVG spec doesn't support 3D transforms. You can animate 3D transforms on the whole SVG. So you could loop through and create all the SVGs or make clones and then animate any of them on any axis, but nesting the elements as children of one SVG won't give you access to x/y rotations. Hopefully that helps. Happy tweening.

You can add rects as child element to svg rather than embedding svgs. Not exactly sure what you are trying to do(plus I am in hurry) but this should be close and will give you ideas. Also note that svg spec doesn't support 3D transforms so rotationX and rotationY won't work in all browsers.

Adding your SVG via <img> element will prevent manipulation with JavaScript. You can get some control of it with CSS, but it has to be part of the SVG code. External stylesheets won't work on the nested elements. You'll have the most control and options by putting the code inline. That being said, we have had some discussions about injecting the code. Here are a couple threads that may be of interest to you. Happy tweening.

If I understand correctly, I think he wants to use a loop just to minimize the code. Interestingly, our example in the scrollToPlugin docs actually has loop snippet commented out at the bottom. Here is the code $("button").each(function(index, element){ $(this).click(function(){ TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}}); }) })