Jump to content
Search Community

Search the Community

Showing results for tags 'url'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. I am trying to use GSAP with React. In React I am creating a component with some text animations, for which I would I would like to create several instances at runtime. The main component should look like this: import React, { Component } from 'react'; import './App.css'; import { TimelineMax, Bounce} from 'gsap'; import Title from './Title.js'; let mainTimeline; class App extends Component { componentDidMount() { setTimeout(this.animate, 1000); } componentWillUnmount() { mainTimeline.kill(); } animate = () => { mainTimeline = new TimelineMax({ id: 'Everything' }); const titleTimeLine = new TimelineMax({ id: 'Title' }); const titleTimeLine2 = new TimelineMax({ id: 'Title2' }); mainTimeline.addLabel('start'); // get external timelines titleTimeLine.add(this.title.timelineEnter); titleTimeLine2.add(this.title2.timelineEnter) mainTimeline .add(titleTimeLine, 'start') .addLabel("title2") .add(titleTimeLine2, 'title2') } render() { return ( <div className="App"> <Title text="The benefits are:" clipPathId="clipPath1" ref={(el) => { this.title = el; }}/> <Title text="This should work" clipPathId="clipPath2" ref={(el) => { this.title2 = el; }}/> </div> ); } } export default App; And the Tile component is: import React, { Component } from 'react'; import { TimelineMax, Power4, SlowMo} from 'gsap'; import './Title.css' class Title extends Component { constructor(props) { super(props); const { text, clipPathId } = this.props; } get timelineEnter() { const tl = new TimelineMax(); const duration = 1; tl.to(this.line, duration, {attr:{x1:120, x2:880}, ease:Power4.easeInOut}) .to([this.reveal, this.line], duration, {y:"+=120", ease:Power4.easeInOut}) .to(this.line, duration, {attr:{x1:500, x2:500}, ease:Power4.easeInOut}) .to(this.clipPathReveal, duration, {y: -180, scale: .3, transformOrigin:"50% 50%", ease:SlowMo.ease.config(0.7, 0.7, false)}) return tl; } render() { return ( <svg className="demo" viewBox="0 0 1000 500"> <defs> <clipPath id={this.props.clipPathId} ref={(el) => { this.theClipPath = el; }}> <rect ref={(el) => { this.reveal = el; }} x="0" y="-100" width="1000" height="250" fill="#000" /> </clipPath> </defs> <line ref={(el) => { this.line = el; }} x1="500" y1="150" x2="500" y2="150" strokeWidth="20" stroke="red"/> <g ref={(el) => { this.clipPathReveal = el; }} clipPath="url(#clipPath1)"> <text transform="translate(500 250)" fill="#3088Ef" textAnchor="middle" fontSize="80">{this.props.text}</text> </g> </svg> ); } } export default Title; The problem is that in the code: <g ref={(el) => { this.clipPathReveal = el; }} clipPath="url(#clipPath1)"> <text transform="translate(500 250)" fill="#3088Ef" textAnchor="middle" fontSize="80">{this.props.text}</text> </g> for the clipPath attribute, I need to pass a dynamic URL. Otherwise, it doesn't work correctly. Is there a way to pass a dynamic id to the URL in clipPath="url(#clipPath1)". Something like clipPath="url({dynamicURL})" or something? In the first instance of <Title>, it should produce clipPath="url(#clipPath1)", while in the second it should be clipPath="url(#clipPath2)" and so on.
  2. I have some SVG that resides directly inside my HTML (no object/img are used). I use jQuery and GSAP for the animation, which works fine. That is, until I load the animation from a URL different from the site root URL. In which case only part of the animation works (??). Works: http://www.brigaid.nl/staging/grahamskitchen/ Does not work: Works: http://www.brigaid.nl/staging/grahamskitchen/menu-wijn/ (Latest Chrome, Firefox) I'm sorry I can't be more elaborate about this, because it has me completely stumped. It almost seems like a 'same origin' issue, but I really can't see how that is the case. The SVG is directly embedded and everything is loaded from the same base URL from a remote web server. Please note that I cannot create a pen for this, because the problem seems to be directly related to this specific setup. Hoping for some bright insights!
  3. I am trying to get url in progresshandler. I tried typecasting event.target to LoaderItem, but it doesn't seem to work. event.target is of type LoaderMax. How can I get the currently loading item's url in progress handler ? Please help..
  4. Here's an easy one: How do I update the url that a conditional statement determines? What I have so far does not work: var video:VideoLoader = new VideoLoader('', {name:"weatherVideo", container:mc_video, width:756, height:672, scaleMode:"proportionalInside", bgColor:0x000000, autoPlay:false, volume:0, estimatedBytes:75000}); if( condition == "Cloudy.png" ){ getVideos( 'video' ); } function getVideos( url:String ):void { video.getLoader( 'weatherVideo' ).url = url; video.load(); video.playVideo(); }
  5. Hello, I am using LoaderMax to load assets from a web server when my AS3/AIR game starts. Assets might be PNG files (using ImageLoader) or SWF's (using SWFLoader). I would like to cache the content in persistent storage -- since I am using AIR, this would be mean storing the cache in the computer's file system or the mobile device's application storage area, so that the next time my game is run, I do not have to reach out to the server and re-download the assets. I could use code like the following: var file:File = File.applicationStorageDirectory.resolvePath ("test_cache_as3"); var fileStream:FileStream = new FileStream(); fileStream.open(file, FileMode.WRITE); fileStream.writeObject(... my image/SWF ...); But then I need to figure out how to serialize images and SWF's -- which doesn't appear to be an obvious thing to do. I tried with images, by calling registerClassAlias ("Bitmap", Bitmap); registerClassAlias ("BitmapData", BitmapData); registerClassAlias ("Transform", Transform); and then storing Bitmap's in a Dictionary keyed by their URL... reading the images back in caused headaches with the bitmap's BitmapData member. Any advice or suggestions? This seems like it might be a common need (cacheing the results of URL fetches), so I feel like I am missing something obvious. Thanks so much for your help!
×
×
  • Create New...