Jump to content


  • Posts

  • Joined

  • Last visited

About omarel

omarel's Achievements


Newbie (1/14)



  1. @Dipscom Just wanted to say thank you! I've played with this and I'm getting it. It is going to be quite tedious when doing a lot of tweens for a production environment where it needs to work properly on every possible device, but I'm happy there's a solution!
  2. That looks interesting. I can only see it on my phone right now. I want to see what happens on desktop and resizing the browser. But I'm wondering if we can release properties and have it retween on resizing and once it hits the desired breakpoint? Overall this can surely get complicated when you have a lot of tweens. But anyone who pushes things into production knows dealing with these issues is of huge importance. I wish greensock had some more built in functionality to deal with responsive issues. Things like swiper js have properties for breakpoints.
  3. @dipscom, what I want to do is on less than 768px the tween should be TweenMax.to('.box', 1, { opacity:1, width:"100%" }) and on higher than 768px the tween should be: TweenMax.to('.box', 1, { opacity:1, width:"65%" } I'm not sure what's the best way to approach this. I'm not exactly sure which option is needed. I dont think its clearProps because I may still want the tween, but with different properties.
  4. Because tweenMax adds inline CSS styles for tweens I'm having trouble with how the tweens look on mobile and different breakpoints. I'm trying to figure out how you can update the tween for mobile breakpoints and when the browser is resized? For example here's a code pen. What if I want this tween width to go to 90% for everything below 768px as well as when the browser is resized below that breakpoint? is there a "easy" way to do this. I'm worried this will get out of hand when you have many tweens on a page
  5. Ah. I think putting the paths in one SVG and being able to animate the viewbox will solve the problem! I'll play with this. Thank you.
  6. @Mikel that looks like a helpful example. I'm going to play with that. But I'm wondering if this will work the same when the ellipse has viewbox properties.
  7. I can put them in the same SVG but then I'm not sure how the placement of an svg with a huge hidden path would lay on the page. I'd have to play with that, especially given viewbox properties. Can tweenMax animate the SVG viewbox?
  8. I'm practicing the morphSVGplugin and may just not be understanding its capabilities. I'm trying to morph a shape into a new shape that is larger and in a different spot in the DOM. (It seems it only morphs a shape into another one, but the properties of the first shape are retained.) Here's my pen, Im trying to morph the 0 into the rectangle, but the 0 is turning into the rectangle in its same spot and is like cut off with no room to be full like the rectangle. I'm not sure how I would morph the 0 into the rectangle but make it large and move into the spot of the rectangle.
  9. I have a codepen with a hamburger menu animation similar to your question, in case it helps you. You can check out the code: You can toggle CSS classes on click and run different timelines.
  10. I want to include the least scripts as possible. Am I understanding correctly? If I include the TweenMax .js file, that automatically includes TimelineMax, all the basic plugins, eases and extra eases?
  11. Sorry I couldn't be of any more help on the topic besides what I noticed on your viewbox. Maybe the team will be able to address whatever I'm missing.
  12. I keep reading this thread and I'm not clear on the issue that's happening. Why not just use .to and tween to the exact CSS properties you want to go to and I don't think in that case you have to worry about reading anything on the current element?
  13. Victor this is such an an amazing feat. I saw it the other day. Great to see you in the forums. You should be proud for sure! As it's a lovely implementation. I was actually wondering about all the animated curves in the photos. Was that gsap? And maybe if you can speak to some of the technology implementated on various parts that would be great.
  14. @Amplus yeah unfortunately as mentioned above even CSS styling is not possible on an embedded SVG object. I know you're feeling because svgs can get so big and ugly they're hard to handle alone let alone inside another document. But the styling has to be with the SVG content itself not the object. You can do things like embed the SVG html itself with different techniques which can make it easier....For example in server side PHP you can do an include which brings the SVG content with one line and then you can work with the SVG in a separate file. As mentioned above perhaps there are similar scenarios in JavaScript by keeping the files separately and somehow getting the actual SVG content into the DOM but I'm not sure what drawbacks that can include as well.
  15. @Magnu5 I believe this issue is related to the way the SVG dom itself works. If an SVG has a width of 50px and the viewbox is set to 100px it will create the necessary empty space to fill in the viewbox. So technically the SVG is acting like it should by providing that additional padding. Once those properties are removed or adjusted within the svg it should be edge to edge again.