Search the Community
Showing results for tags 'greensock'.
-
Hello fellow GreenSock enthusiasts, The company I run ( BannerWave ) is looking to expand and we need a couple part time to full time animators / developers. Here are the specifics of the position. Required skills / tools / technologies: 1. HTML5 / CSS / JS (canvas) 2. GSAP platform 3. WebGL (optional at the base level) 4. Node Experience (optional but a big plus) Experience with: 1. Simple to Complex animation using Greensock 2. Interactive elements (even mini-games) 3. Cross-browser compatibility (IE 9+) 4. Interpreting client feedback. This position is a 100% offsite position. If you are interested and would like to setup a time to talk with use just email us info@bannerwave.com with your resume or LinkedIn profile. Looking forward to talking to you! Thanks!
-
- 7
-
-
- job posting
- animator
- (and 1 more)
-
This works : npm install gsap and npm install @types/gsap by configurig tweenlite into systemjs packaging, worked as expected with angular 2/4 The questions are how to install business green gasp package so I can use with angualr 2/4. How plugins like splittext can be used along with this. Appreciate any help. Thanks
-
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
-
I am having issues with my Atom editor and my code. I am used to codepen, but I decided to stray away from it and use an editor right on my laptop. I am trying to use GreenSock and I honestly cannot get anything to work. I'm new at it and I understand how to do certain things while I looked up the documentation, but I cant get anything to work. I am very confused as to the arrangement of scripts if I am even doing it correctly. I made a mockup tryout from a tutorial here, but I cant get a simple animation working even if the code if practically from here. any help will be appreciated. <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="pathTo/stylesheet.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="pathTo/script.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> </head> <body> <div id="box" class="box green"></div> </body> </html> .box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block } .green{ background-color:#6fb936; } var obj = document.getElementById('box'); TweenMax.to(obj, 1.5, {width:100});
-
Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?
-
I'm trying to make a line appear my text which starts from width: 0 and expands to the width of the text. The way it works currently is it starts from the left (width: 0) and expands all the way to the right (width: 100%). The way i want it to work is: It starts from the center and expands to the left and to the right until it reaches width of text. How can you do this?
-
I am having some troubles with the document.querySelectorAll() because, I don't know why, it doesn't work when I add more than one class or ID. So, this is what I want to achieve: http://codepen.io/sonder15478/pen/PpJqKN But there's a lot of code that I wouldn't need if I use document.querySelectorAll(). This is where I get stuck: http://codepen.io/sonder15478/pen/xqXGXm I also tried with getElementsByClassName(), but it didn't work either... Any ideas? Thank you!
-
Hi, I've created this animation: http://codepen.io/anon/pen/VerMWX, but when I paste it to my code, it doesn't work... do you know if I need to add a link to a Greensock file or something like this. The only link that I have on my header at the moment is: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
-
Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
- 6 replies
-
- 1
-
-
- percentage
- greensock
- (and 8 more)
-
Hi, I am trying to slide two lines in a campaign (one line in one frame and the second in the second frame). I want the second line to follow the first line after few seconds. I am able to slide in and slide out the first line but when I add the second line in the code, the code does not work. Can anyone help me out in this. Here is the link to the jsfiddle: https://jsfiddle.net/5pq750ko/ (If you remove line 4 and 5 from the JS code, you will see the code working. But when I will add the lines back, the code stops working) Thanks -
Hi Ive been struggling to figure this out for about 3 days now. I am creating columns dynamically that are added to a container (when user clicks the add button). Using the draggable plugin I have made them draggable (only horizontally). Everything works fine but what I am stuck with is when a column is dragged and dropped on another then (the dragged column) should be placed either to the left or right of the target column. This is my code thus far. Any help will be greatly appreciated. Draggable.create($element, { // use $element instead of ".column". This is declared at the top ^^^ and refers to this specific instance of 'column' type: "x", edgeResistance: 0.65, throwProps: true, bounds: {left: 0}, lockAxis: true, autoscroll: 1, trigger: $element.find(".drag-handle"),// Use jQueryLite (built in to Angular) to find this column's drag handle onPress: function () { columnList = $(".column:not(#" + $element.attr("id") + ")").toArray(); initialCoords = ($element.css("left")); console.log(initialCoords); }, onDragEnd: function (e) { for(var i = 0; i < columnList.length; i++){ if(this.hitTest(columnList[i], overlapThreshold)) { var jqueryColumn = $(columnList[i]); var objectTwoCoord = jqueryColumn.position(); console.log(jqueryColumn); TweenLite.to(this.target, 0.5, {x: initialCoords }); } } } });
-
Hi, I am new to greensock and I need little help with it. I am trying to reveal few words (2-3 words in a line) as the ball rolls across the x-axis. Is there a way to do that? In my code, the ball rolls till then end and then displays the text, but I want the text to be displayed as the ball moves across. Codepen link: http://codepen.io/anon/pen/pROjra http://codepen.io/anon/pen/pROjra Thanks
-
I have a creation that is making use he GSAP premium add-on: morphing. https://www.redgearstudios.com/Working/PitneyBowes/MorphTest/ Seams that this add-on...which i acquired from the Greensock site as a paid premium member. Unit displays in Safari, Chrome, FF. Although in Win7, Win8 & Win8.1 with browser IE11....its a no go! Does the morphing add-on have limitations that aren't fully disclosed on the site? And if they are on the main site....i might have simply skimmed over them...frantically looking for a solution. Any help please!?! Bryan
-
Hi there, I am trying to have a loading circle play until the other content on the page has loaded (mainly an iframe displaying vimeo). Once that happens the loading circle should fade, the logo play and the vimeo iframe begin. Any help would be greatly appreciated! Phil
-
Hello Everyone I am new to GSAP and have a created a few animations however, I have reached a point where I am stuck. I have created an animation in Greensock however, I don't want my animation to play until that particular section on the page is reached or at least when the section reaches the middle of the viewport. I have used Tween Max to create the animation. At the moment the animation plays as soon as the page loads, but I only want it to play once that particular Div is reached or it within the middle of the viewport. How do I pause the animation from the start until I reach that section then play it? I have attached a codepen for reference. Any help on this would be greatly appreciated Thank-you Sam
-
I just finished creating 2 minutes animation with ~80 objects. I spend more time then i would we spend in after effects or photoshop, but i can make edits 10 times faster, then in Adobe programs. I already asked about UI and got an answer that Greensock using tweenui.com behind the scene (or vise versa). (I can't use this tool, because it's same "Adobe layers timeline system" that i am trying to get rid of using greensock.) One of the most time consuming thing was in the end - adding new object to my scene. 1. I create div element with a path to image source and id 2. I create var shortcut image_name = $("#image_name") (just realized this is not necessarry) 3. I set object to opacity:0 and showing it when it's time My question is - what technologies i can use to make this step easier? I think i should create json array and parser for it. And add image to json dynamicly. And create new array for this image that will have greensock .set function ... okay, my brain just pooped at that point. Can you give me a hint of what should i use? Thank you forum.
-
I am looking for capturing objects position from canvas. Here is an example http://cssanimate.com/ Is it possible to update object position from canvas to code?
-
Hi! I have a task: to make animation like on this page (where block with the phone and tablet is scrolled slowly then block with the text). http://flatata.com/en Try to apply this technique http://bassta.bg/demos/tweenmax-text-animations/index10.html, but no success. I made many attempts, but my result is still doesn't work correctly. How to trigger animation and how to control scrolling speed of images. Any idea? Many thanks in advance for any help. Igor.
-
ESPN is hiring! If you're a front end developer looking for a part time gig (29hrs) please apply in the link below! https://jobs.espncareers.com/job/bristol/part-time-senior-front-end-editorial-developer/5216/3059914
-
Hi, Check out this new Greensock tutorial that shows how to create smaller, faster HTML5 ads from Adobe Animate with GSAP. http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/ Topics covered-- Using GreenSock with Adobe Animate (Flash) Using ActionScript (AS2 or AS3) or JS for HTML5 ads Automatically optimizing your assets with one click Working with clickTags Retina/High DPI asset setup Handle multiple exits on buttons with onClick Handle rollovers with onMouseOver/Out Call JavaScript on the page from timeline code in the FLA Show an ad preloaded Test and validate the ad http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/ -
Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum
-
Hi everybody, I used to work with Greensock API inside Flash (swf), Edge Animate, and, now, in Hype Pro since Edge has been abandonned by Adobe this year. I try to extend Hype features with a GSAP Tweenmax API. But, I cannot obtain 3D real perspective with imbricated symbols. I could get this inside Edge. Why is there a problem with Hype Pro ? I send you the Hype pro file to check it. Thanks for your help. I wrote this code : CSSPlugin.defaultTransformPerspective=700; var wall = document.getElementById("wall"); TweenMax.set(wall,{rotationY:45, transformPerspective:200, transformStyle:"preserve-3d", force3D:true}); TweenMax.to(wall,4,{rotationX:180}); TweenMax.to(".square",4,{rotationY:720}); imbrication3D.hype.zip
-
Hi, Is there a better way to do this? I want to load about 15 different videos all up for a portfolio type site. Any help is appreciated. Thanks, Phil
-
Hi there, I'm starting to use DrawSVG and I really can't make the drawing properly. I read the tutorials and watched the videos a few times and all that I need is to make the drawing properly. Firstly, I don't want the text coming up first, I want the drawing happening along the duration of the tween and revealing the text. Please let me know what's is wrong with my pen. It's an excellent plugin and we have the business club here at work, but I'm testing all the plugins before we place into our production. Any help it will be great. Kind regards, Fernando Fas
-
Hi guys, I'm testing the morphsvg and splittext plugins and got something interesting. After read the tutorials and following the videos from the website, my results didn't match the tutorials and I would like to know why. Strangely, when the splittext is running, it grabs all the javascript codes and post it as a text. I'm sure that is not common, but I have no idea atm what's going on. If you could have a look and reply to this treat it will be great. Kind regards, Fernando Fas
