Jump to content
Search Community

335

Members
  • Posts

    19
  • Joined

  • Last visited

Everything posted by 335

  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. 335

    Animate :after

    Done! Many thanks for your help on this!
  6. 335

    Animate :after

    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. 335

    Animate :after

    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. 335

    Draw Svg polygon

    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. 335

    Draw Svg polygon

    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. 335

    Draw Svg polygon

    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. 335

    Page/site structure

    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. 335

    Page/site structure

    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.
  16. 335

    Page/site structure

    Hi Vic! Many thanks for your reply! I ha a look at your website and I think this is exactly what I am looking for. One question (and even though I did look this up I do not quite understand the difference)- why use Ajax and not Json? So far I have completed about ten courses on JavaScript and jQuery on Treehouse and Lynda.com, and I also got two very good books- Mark Myers' A Smarter Way to Learn jQuery and Ryan Benedetti and Ronan Cranley's Head First jQuery. Any recommendations on the next course to do or any good books that could help me master this technique. Although I have made lots of progress in the last few months I have to say that I do not find it easy!
  17. 335

    Page/site structure

    I've been learning JavaScript and jQuery for a few months now and it's been a bit of a learning curve. So far all of my sites have been using HTML/CSS3 only. Now I would like to push things further. I keep seeing lots of sites like these (this is one example)- http://femmefatale.paris/en What I am unsure about is- is this website basically one page? If I created one very long page with all of sections that animate in and out, and which likely contain lots of pictures, videos, etc. Would this overload the browser and affect the smoothness of animations? This is something I would like to try so to save some time I would be grateful for any pointers you may have.
  18. Many thanks for your replies everyone! This gave me loads of things to look into! Waren, this does exactly what I wanted. One question though- the animation can become a bit jerky at times. Any suggestions on how to make it smoother?
  19. Hello everyone! This is my first post here having started to learn jQuery very recently. Learning it is very exciting but there's so much to get your head around... I look at lots of websites and try to learn as much as I can. Can you tell me what would be the best way to achieve this effect- http://spain.madeforspainandportugal.com/en/ -background image looping around a circle or a path? Many thanks in advance!
×
×
  • Create New...