• Content count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About 335

  • Rank

Profile Information

  • Gender
  • Location
  • Interests
    Photography, music, web design
  1. Many thanks for your help!!! I removed all calls to the CSSRule plugin and now break points work as normal!
  2. Hi Jonathan! Sorry, I mentioned ScrollMagic but I think this is GSAP related. What I did was to copy whole CSS before all media queries and this seems to work. However, animations of pseudo-elements using CSSRule no longer animate and they did before I changed the CSS. An example of the above is here: http://thinkingplace.org/ Code relating to these animations is: var introhintTl = new TimelineMax(); var rule = CSSRulePlugin.getRule(".h_int:after"); introhintTl.from($('.h_int'), 0.5, {y: 200, ease: Expo.easeInOut}) .from(rule, 0.3, {cssRule:{left:"-30%"}}) .from($('.curtain1'), 0.3, {x: '100%', ease: Expo.easeInOut}, 1.5) .from($('.curtain2'), 0.3, {x: '100%', ease: Expo.easeInOut}) .from($('.hut1'), 0.2, {x: '100%', ease: Expo.easeInOut}) .from($('.caption_1'), 0.5, {width: '0px', padding:"0px", ease: Expo.easeInOut}) .from($('.caption_1 p'), 0.5, {autoAlpha: "0", ease:Power0.easeNone}); var introhintScene = new ScrollMagic.Scene({ triggerElement: '#intro', triggerHook: 0.4, reverse:false }) .setTween(introhintTl) .addTo(controller); var introhprojTl = new TimelineMax(); var rule2 = CSSRulePlugin.getRule(".h_proj:after"); introhprojTl.from($('.h_proj'), 0.5, {y: 200, ease: Expo.easeInOut}) .from(rule2, 0.3, {cssRule:{left:"-30%"}}) .staggerFrom($('.pls'), 0.3, {y: 300, ease:Power0.easeNone}, 0.3); var introhprojScene = new ScrollMagic.Scene({ triggerElement: '.projects', triggerHook: 0.7, reverse:false }) .setTween(introhprojTl) .addTo(controller); var introhbioTl = new TimelineMax(); var rule3 = CSSRulePlugin.getRule(".h_bio:after"); introhbioTl.from($('.h_bio'), 0.5, {y: 200, ease: Expo.easeInOut}) .from(rule3, 0.3, {cssRule:{left:"-30%"}}) .from($('.bim img'), 0.4, {x: "120%", ease:Power0.easeNone}, 1.5) .from($('.caption_2'), 0.5, {height: '0px', padding:"0px", ease: Expo.easeInOut}) .from($('.caption_2 p'), 0.3, {autoAlpha: "0", ease:Power0.easeNone}); var introhbioScene = new ScrollMagic.Scene({ triggerElement: '.biography', triggerHook: 0.7, reverse:false }) .setTween(introhbioTl) .addTo(controller);
  3. I am working on a webpage where I use ScrollMagic and GSAP for animations. I usually work on one general layout and then refine it for different screen sizes. I just divided my css by media query so I can target different screen sizes and all my animations stopped working!? The CSS is the same- the only difference is whether it is just one style or the same style divided by query. Do you know the reason for this happening?
  4. I am working on this map (not sure why the animation itself is not working on the Codepen). I made it on a 27in monitor and on a big screen it works fine. However, when I started working on the stylesheet for smaller screens I realised that this map on a typical 13in Mac laptop (1280x800) I realised that I have a bit of a white border at the bottom because the monitor is of different proportions to my image. Is there a way of stretching the SVG to cover the full height of the DIV? I tried adjusting many different parameters but none of them seem to do anything. I also noticed that adjusting padding-bottom on <div class="svg-container" style="padding-bottom: 58%;"> does not do anything to the size of the image!?
  5. Done! Many thanks for your help on this!
  6. Hello Jonathan! Excellent! I got it to work! Many thanks for the detailed answer!!! I would now like to repeat this for several <h3> elements on the page so I wanted to give them an id but I don't know how to select them!? I tried this- var rule = CSSRulePlugin.getRule("h3#introh:after"); and also var rule = CSSRulePlugin.getRule("#introh h3:after"); but neither work. What would be the correct selector for this h3 element with an id="introh"?
  7. Is there a way to animate :after pseudo-element? I have- h3 { font-family: 'Open Sans', sans-serif; display: inline-block; font-weight: 900; font-size: 2.818rem; margin-top: 3rem; margin-bottom: 3rem; letter-spacing: -0.5px; line-height: 3rem; color: #3b3a36; overflow: hidden; } h3:after { display:block; clear:both; content : ""; position: relative; left : 0; bottom : 0; max-width:250px; height : 1px; width : 73px; border-bottom:5px solid #3b3a36; margin:0; padding:16px 0px; overflow: hidden; } and I am trying to animate it like this: var controller = new ScrollMagic.Controller(); var introh3Tl = new TimelineMax(); introh3Tl.from($('h3'), 0.5, {y: 200, ease:Power0.easeNone}); var introh3Scene = new ScrollMagic.Scene({ triggerElement: '.two', triggerHook: 0.5 }) .setTween(introh3Tl) .addIndicators() .addTo(controller); This makes the h3 and the underline move which is fine. However, what I would really like to have is for the letters scroll up and once this is complete for underline to scroll in from the left. I tried many things like .from($('h3:after'), 0.2, {x: -100, ease:Power0.easeNone}); with no luck. Any suggestions on how to achieve this?
  8. Many Thanks PointC! I tried var t1 = TweenMax.to(obj1, 10, {length:obj1.pathLength, onUpdate:drawLine1, ease:Linear.easeNone}).reverse(0) and what this does is shaw the completed line animation and then goes back to where no line is shown. Is there a way of drawing the line in the different direction A-to-B or B-to-A? Many thanks!
  9. Many thanks PointC! I created the map in Illustrator and have now converted all polygons to compound paths. One more question- is it possible to reverse animation on some paths? I tried adding reverse()- function drawLine1() { orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].reverse().join(' '); But this doesn't work... Also, I am considering joining Club Greenock but I do not have time to look into it properly at the moment.
  10. Hello! I am trying to make an animated SVG of a complex map. I have over 120 elements in my animation. Most of these are paths but some of them are also polygons (circular). Here's a CodePen: http://codepen.io/i76/pen/vgwKKX I am a JavaScript novice. I searched this forum and found a script (in Carl's post) which allows me to draw a path- var orig1 = document.querySelector('#lineAB'); var obj1 = {length:0, pathLength:orig1.getTotalLength()}; orig1.style.stroke = '#f60'; var t1 = TweenMax.to(obj1, 10, {length:obj1.pathLength, onUpdate:drawLine1, ease:Linear.easeNone}) function drawLine1() { orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' '); } However, this does not work with polygons. My guess is that there is not built-in polygon.Length object in JS. I have found this function on another forum that would measure the length of a polygon but I am not sure how to implement it- getPolygonLength:function(el){ var points = el.attr('points'); points = points.split(" "); var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3; for(var i = 0; i < points.length; i++){ var coords = points[i].split(","); if(x1 == null && y1 == null){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x1 = coords[0]; y1 = coords[1]; x3 = coords[0]; y3 = coords[1]; }else{ if(coords[0] != "" && coords[1] != ""){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x2 = coords[0]; y2 = coords[1]; lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); x1 = x2; y1 = y2; if(i == points.length-2){ lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2)); } } } } return lineLength; } If it doesn't take very long would anyone be able to include the above function into the snippet above so I have a way of animating the polygons as well? Many thanks in advance!
  11. Hello everyone! I am only getting to grips with GSAP and I use it for relatively simple animations and effects. I was working on this website (see the opening heading)- http://www.adbmedical.com Everything works very smoothly on my local machine but on the server there is a delay and the animation plays very choppy. Can anyone tell me how to solve this problem? Many thanks in advance!
  12. I would be very interested to learn and I think I would definitely be able to help you to present the material... If you want to test I would be willing to participate and I think I would be a very good tester! You can message me if you like!
  13. Hi Vic! That code is very hard for me to read or understand but as I said I am not very advanced in the language! However, I have a bit more than ten years experience of teaching at university so I could definitely work with you on this. When I first started to teach and some time had gone by I started realising my own mistakes in trying to teach some complex concepts to students who are so much less clued up. Teaching what you know, what I learned as the time went by, is also a skill in itself! You should explore the whole process of learning before you start writing the book! Ryan Benedetti and Ronan Cranley's Head First jQuery, as I mentioned earlier employs some very effective techniques. Paul Tough's How Children Learn would also be a very good read! I think lots of people on this forum would give you loads of help if you really wanted to make that book!
  14. Hello Jonathan! I evidently misunderstood the question! Even though I have operational knowledge of html/css, the more I learn the more I see that in themselves these are very powerful languages and that I should study these more! The trouble with me is that I am not afraid to ask simple questions! I am a photographer and I would like to learn all these techniques in order to make interactive multi-media presentations. I read a post by PointC and I do have to agree that this forum is a very cool and supportive community of people trying to push the limits of the web. I was learning GSAP for a while without thinking I should join this forum. I am very glad I did and I am sure I will progress more rapidly! Thanks for sharing your knowledge with us!
  15. One other idea- overflow: hidden; on body or html tags could hide the scrollbar. I was solving this problem by applying overflow-x: hidden; to the div itself.