Jump to content

Search the Community

Showing results for tags 'html'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hello folks, For a school project I am creating an analog clock and animating it using GSAP. For now, I've got it moving in the way I want, but part of the functionality of a clock is that it actually shows the current time. So my hence my question, how do I get the arms to show the current hours, minutes and seconds?
  2. So for a school product I really want to recreate something like this, but the example here is using jQuery. One of the conditions of the challenge was to use the GSAP libraries, so jQuery is not allowed. Is there an easy way to make this kind of clock using GSAP? Is there fast way to replace jQuery with GSAP withing my js files? I'm a beginner so all the tips are welcome!
  3. Hello, I would like to know if it is possible to create my own HTML structure with SplitText. That is to say, instead of having a single div around each line, I would like to create 2 divs around each line. Thanks.
  4. Hello, I am having a problem in creating a hover dropdown using GSAP animations to stagger in links after the container fades and drops in. After the user hovers off, it does another timeline in reverse. However, if a user were to go back and forth too quickly there are partial or full loops of the animations over and over depending on the swipes across the trigger. I am wondering if there is a way GSAP knows and animations are playing and will not allow another set to run if another is playing. Something along the lines of if tl starts and the user hovers off then it finish before starting timeLine's animation...? Thanks in Advance!
  5. Hey so I'm currently making an animated graph to show how often I skip a song on Spotify. All I'm trying to do right now is bring in "Spotify" however no animation plays despite chrome dev tools saying there is no error. Also, I commented out line 209 in my HTML because for some reason it cannot link my DrawSVGPlugin. If anyone can help with one or both of the problems I'd greatly appreciate it; thanks.
  6. Well I have this bundling process: Starting with coffeescript files being transpiled to their counterpart js files in single directory. So for all those JS files I can include and use them then with: require "./moduleX.js" Then bundle them with webpack to a single bundle.js And then I use pug to include the bundle.js into the single HTML file. The Problem: When using import TweenMax from "gsap/TweenMax" weird strings appear in the HTML outside of script tags and render the whole HTML useless. Such strings are: "\n\t\t\t *\n\t\t\t * @param {!string} ns The namespace of the class definition, leaving off \"com.greensock.\" as that's assumed. For example, \"TweenLite\" or \"plugins.CSSPlugin\" or \"easing.Back\".\n\t\t\t * @param {!Array. <string>} dependencies An array of dependencies (described as their namespaces minus \"com.greensock.\" prefix). For example [\"TweenLite\",\"plugins.TweenPlugin\",\"core.Animation\"]\n\t\t\t * @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition.\n\t\t\t * @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object)\n\t\t\t */\n\t\t\tDefinition = function(ns, dependencies, func, global) {\n\t\t\t\tthis.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses\n\t\t\t\t_defLookup[ns] = this;\n\t\t\t\tthis.gsClass = null;\n\t\t\t\tthis.func = func;\n\t\t\t\tvar _classes = [];\n\t\t\t\tthis.check = function(init) {\n\t\t\t\t\tvar i = dependencies.length,\n\t\t\t\t\t\tmissing = i,\n\t\t\t\t\t\tcur, a, n, cl;\n\t\t\t\t\twhile (--i > -1) {\n\t\t\t\t\t\tif ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) {\n\t\t\t\t\t\t\t_classes[i] = cur.gsClass;\n\t\t\t\t\t\t\tmissing--;\n\t\t\t\t\t\t} else if (init) {\n\t\t\t\t\t\t\tcur.sc.push(this);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif (missing === 0 && func) {\n\t\t\t\t\t\ta = (\"com.greensock.\" + ns).split(\".\");\n\t\t\t\t\t\tn = a.pop();\n\t\t\t\t\t\tcl = _namespace(a.join(\".\"))[n] = this.gsClass = func.apply(func, _classes);\n\n\t\t\t\t\t\t//exports to multiple environments\n\t\t\t\t\t\tif (global) {\n\t\t\t\t\t\t\t_globals[n] = _exports[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.)\n\t\t\t\t\t\t\tif (typeof(module) !== \"undefined\" && module.exports) { //node\n\t\t\t\t\t\t\t\tif (ns === moduleName) {\n\t\t\t\t\t\t\t\t\tmodule.exports = _exports[moduleName] = cl;\n\t\t\t\t\t\t\t\t\t ... I did not manage yet to stop webpack from using eval. Which could be part of the problem. I do have a workaround where I don't use npm, just adding the TweenMax.min.js to the same directory as the other js files and use TweenMax = require "./TweenMax.min.js" The problem is when using the MorphSVGPlugin it requires the module TweenLite as npm module. ERROR in ./compiled/js/plugins/MorphSVGPlugin.min.js Module not found: Error: Can't resolve 'TweenLite' in './compiled/js/plugins' So has anyone an idea on the issue with the thought build process? Or does anybody have an idea how I can get the workaround to also work for the MorphSVGPlugin? Help would be very appreciated
  7. Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .
  8. Hi, Anybody can help me achieve the slider effect this firm is using? antoni.de I am new to using greensock. Thank you in advance! GH
  9. Hi, How do I animate this ball up and down smoothly. I'm using fromTo but i don't know where to put "repeat:-1"
  10. Hello I am able to scroll the div from right to left side but I have to display the div linearly when scrolling the mouse wheel.The current code is not displayed liner. I mean I have to display smoothly from right to left. TIll now I haven't used GSAP. Would you help me out in this? https://jsfiddle.net/Narendra2015/3s5su2q3/
  11. Hey guys, so i am wondering how i can animate my svg? It is only the second time i am doing this only this time it wont work. If i place in the css for instance : opacity:0; this will work. When i use .from opacity or autoAlpha:0 nothing happens. I also used transform origin in the inline style, that also works. What is wrong? Also no console errors in the browser. Would like to animate them so they look like a bar graph Thanks allot in advance
  12. I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
  13. Hey guys, I'm trying to create an animation for a cup of coffee that has hot steam leaving it. The idea is to have 2 curved lines that constantly move up on the y-axis. The top and bottom of the paths are hidden behind a mask. My goal is to have the paths constantly move up with the illusion that it's constant. Right now you can see the path has to stop, then reset its position before moving back up. I hope this makes sense. Is this possible?
  14. Please check my tutorial on my Layout Helper tool to create banners faster:
  15. Can you share your methodology for HTML and CSS when working banners. You know, the non-GSAP part? I usually chop up the PSD to get my images. I name images as I will reference them on CSS, HTML and JS; so product.png will be <div id="product" class="animated"><img src="product.png" /><div> then on CSS I will have .animated { display: block; position: absolute;} #product { left: 10px; top: 35px;} Then when the layout is done I start the GSAPing from there.
  16. Hi, I was using these two scripts in my HTML5 banner ads: <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> I had to put these two banner ads through google so as per the https://support.google.com/richmedia/answer/6307288, I changed the above scripts to: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> After running the code, it throws an error saying that "TimelineMax is not defined". Can anyone please tell me what am I suppose to do to fix this? Thanks
  17. 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.
  18. This is my first GSAP animation. I'm very new to this and Jquery. I'm trying to create an animation that will play once the user scrolls to it on the website. I created a scroll script that works great when i'm simply changing a background-color when the users scroll to the element, but i can't figure out how to attach it to my SVG animation. I thought it would be as simple as nesting my GSAP code within my Jqeury but it's not working. My goal is to have the SVG play once the user scrolls to it, and then stop playing if the user scroll away from the icon. I also notice the SVG is floating outside of the Div. Any advice would be appreciated.
  19. How can I make a text float in like a wave from left to right. I am able to get the text into the frame normally but not like a wave form. Is there a way of doing it?
  20. Greetings, i would like to create my own HTML dropdown component, similiar to this one https://semantic-ui.com/modules/dropdown.html but with GreenSock animation support I have following questions: Is there any effective way of creating nice component code for greensock or it really doesn't matter (KISS method and reusable code)? How can i animate scrolling inner content by items? (i guess i will need to measure height of one item and then scroll it) Can i publish that component somewhere for others? I would like to create animated UI component pack with some extra JS features like searching etc. Thanks for any kind of help.
  21. Hi all, I have been stuck because of this click function I want to work. Basically what I want to achieve is if you hover on the item the animation wil start and when unhover the animation wil reverse, this happens to work really good. The part i'm having problems with is the click function. if the user click on the button the div that is related to the button will be shown. Right now if the button is clicked the div will hide or not being shown. I think the reason for the related div not being shown is because of the Gsap animation. I could help some advice for keeping me in the good direction how I could make this work. see my codepen
  22. 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
  23. 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});
  24. 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
  25. 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