Jump to content
Search Community

Woohoo

Members

  • Posts

    6

  • Joined

  • Last visited

Woohoo's Achievements

2

Reputation

  1. Woohoo
    Oh, I will definitely learn the language. But having no programming background, it is sometimes very hard and frustrating. Anyway, thank you for this code snippet. This will help me getting further.
  2. Woohoo
    Thanks for the response and the URL's But I'm afraid that a lot of animators (like me) are just getting used to using GSAP to get things done the way they like it (not having experience with javascript but knowing how to use the Greensock API), and have no or little knowledge of how to get it workable in an almost productive-ready situation, javascript-wise. The case I'm describing is a very common situation. Can't Greensock write a tutorial on how this can be done, instead of providing URL's where the use of cookies and session storage are explained in a way many animators just can't follow or comprehend? Or maybe a (non Greensock) tutorial that explains a lot about this topic for people that have little knowledge about javascript?
  3. Woohoo
    Hi all, I'm pretty new to GSAP and javascript/jquery in general. This is the case: I'm developing a website where an animation plays when someone visites the site for the first time (animation is on the homepage). When navigating the site, and going back to the homepage the animation starts playing again. I don't want this animation to play again when a visitor is navigating the site. I think this has something to do with cookies or so. But how can I set or use cookies with GSAP to prevent playing this animation.
  4. Woohoo
    Thanks OSUBlake for your thorough reply. I'll definitely try that last bit of javascript out.
  5. Woohoo
    Hmmm, I managed to animate something inside a <use> element. It's probably a hack, I don't know. This is what I did in the HTML. In the head of this HTML I include the necessary 'svg4everybody' script files. In the HTML I put the SVG with a <use> tag. Like so: <html> <head> ... <script src="js/svg4everybody.legacy.min.js"></script> <script> svg4everybody({polyfill: true}); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div class="wrapper"> <div class="toptaak_icon"><svg class="alkmaar_icon" role="presentation"><use xlink:href="img/alkmaar_iconen.svg#maaltijdverzorging"></use></svg></div> </div> <script> ... </script> </body> This SVG file contains around 60 icons, all defined as a <symbol> with a unique ID, and I only use one of these in this example. Now comes the weird part. I use bits of the javascript you referred to on plunker: http://plnkr.co/edit/LneUEK?p=preview This is how that javascript (inside the HTML document) looks like: $(function(){ var container = $("#foo"); var svgUrl = "foo.svg"; $.get(svgUrl) .then(injectSvg) .always(startAnimation); function injectSvg(xmlDoc) { var svg = $(xmlDoc).find("svg"); container.append(svg); } function startAnimation() { var tl = new TimelineMax(); var icon = $('#maaltijd'); var show = $('.toptaak_icon'); tl.set(show, {autoAlpha:1}); tl.from(icon,0.5,{scaleX:0.5, scaleY:0, transformOrigin:"50% 100%", ease:Elastic. easeOut.config( 1, 0.3)}); } }); The first part of this script (before 'function startAnimation()' ) makes it happen. What is weird though, is that there is no element with an id of 'foo' in the HTML, there isn't even a SVG file named 'foo.svg'. But when I delete those lines (everything before 'function startAnimation()' ) nothing is animated, and the SVG just renders as a static icon on screen. So somehow, these lines are needed although they refer to elements that are not present. You can see it working here: https://woohoodesign.nl/svg/raf/icon-preview.html I don't know exactly how I got this working (my javascript skills are limited), but it is working.
  6. Woohoo
    I used to use the 'svg4everybody' javascript (https://github.com/jonathantneal/svg4everybody) to get the svg inline like this: <div class="container"> <svg class="logo" role="presentation"> <use xlink:href="img/logo.svg#raf_logo"></use> </svg> </div> The result is that the SVG is presented inline in the HTML document. That works perfect for static icons, or when you do some CSS3 animations. But wanting to do more complex animations, I decided to go with GSAP. Unfortunately, the 'injected' SVG with 'svg4everybody' can not be animated using GSAP. For some reason, I just can't go into the inline SVG. No classes or id's are recognized by GSAP. For the time being I use the inject method as presented in this example: http://plnkr.co/edit/IWTAV5jIxzSioTpj8UkJ?p=preview But can someone explain why the 'svg4everybody' method doesn't work with GSAP?
×
×
  • Create New...